// Home page — picara. No drop / shop content; quiet brand intro + values + CTA to story.

// Tiny climber on a rappel strand, side profile, hanging on the LEFT of the "p".
// Anchored above the cap-height; rope dangles down beside the stem of "p".
const Rappeller = () => {
  return (
    <span className="rappel" aria-hidden="true">
      <span
        className="rappel__rope"
        style={{
          left: "-0.04em",
          top: "-0.2em",
          height: "0.74em",
        }}
      />
      <span
        className="rappel__climber"
        style={{
          left: "-0.04em",
          top: "calc(-0.2em + 0.74em)",
        }}
      >
        <svg viewBox="0 0 24 28" preserveAspectRatio="xMidYMin meet">
          {/* Side profile rappeller — facing right, body angled away from wall (right side).
              Rope enters at top-center, harness clip at chest. */}
          {/* harness tie-in line from rope to chest */}
          <path d="M 12 0 L 12 7" stroke="#2a2725" strokeWidth="1" fill="none" strokeLinecap="round" />
          {/* helmet (side view) */}
          <path
            d="M 8 6 Q 9 3 12.5 3 Q 16 3 17 6 L 17 7.4 L 8 7.4 Z"
            fill="var(--accent-deep)"
            stroke="#2a2725"
            strokeWidth="0.9"
            strokeLinejoin="round"
          />
          {/* helmet brim */}
          <path d="M 7.4 7.4 L 17.6 7.4" stroke="#2a2725" strokeWidth="1" strokeLinecap="round" />
          {/* face/neck (side) */}
          <path d="M 13 7.6 Q 14.6 9 13.4 10.4" stroke="#2a2725" strokeWidth="0.9" fill="#f1d9b8" />
          {/* torso, leaning back away from wall */}
          <path
            d="M 11 9.8 Q 9.6 12.6 11 16.4 L 16.4 14.6 Q 17 12 16 9.6 Z"
            fill="var(--accent)"
            stroke="#2a2725"
            strokeWidth="0.9"
            strokeLinejoin="round"
          />
          {/* arm reaching up to grip rope */}
          <path d="M 12 9.8 Q 10.6 7 11.6 5.6" stroke="#2a2725" strokeWidth="1.2" fill="none" strokeLinecap="round" />
          {/* lower brake-hand arm */}
          <path d="M 14.4 13.4 Q 16.4 14.4 16 16.6" stroke="#2a2725" strokeWidth="1.2" fill="none" strokeLinecap="round" />
          {/* legs braced against wall (to the LEFT, toward 0) — pushed out */}
          <path d="M 12 16 Q 8 17 5 17.4" stroke="#2a2725" strokeWidth="1.4" fill="none" strokeLinecap="round" />
          <path d="M 13.6 16.6 Q 9.6 18.6 6.4 19.6" stroke="#2a2725" strokeWidth="1.4" fill="none" strokeLinecap="round" />
          {/* boots (pointed at wall) */}
          <ellipse cx="4.6" cy="17.4" rx="1.4" ry="0.8" fill="#2a2725" />
          <ellipse cx="6" cy="19.7" rx="1.4" ry="0.8" fill="#2a2725" />
          {/* small backpack hump behind torso */}
          <path d="M 16.4 10 Q 18.4 12 17.4 14.4" stroke="#2a2725" strokeWidth="0.9" fill="rgba(0,0,0,0.12)" />
        </svg>
      </span>
    </span>
  );
};

const HomePage = ({ tweaks }) => {
  const a = tweaks?.accent || "poppy";
  const filter = tweaks?.photoFilter || "dispo";
  return (
    <div className="site">
      <Nav current="home" />

      <section className="hero">
        <div className="hero__grid">
          <div>
            <h1 className="hero__title">
              picara
            </h1>
          </div>
          <div>
            <p className="hero__lede">
              Soft-spoken, small-batch goods for canyoneers. Sewn one
              at a time in a sunny room in Salt Lake. Built to be
              <em> light enough to forget</em> and tough enough to remember.
              Designed for all body types.
            </p>
            <hr className="rule rule--dotted" style={{ margin: "24px 0" }} />
            <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
              <div>
                <p className="eyebrow">Made by</p>
                <p style={{ margin: "4px 0", fontStyle: "italic" }}>cole & sadie</p>
              </div>
              <div>
                <p className="eyebrow">Sewn in</p>
                <p style={{ margin: "4px 0", fontStyle: "italic" }}>Salt Lake City, UT</p>
              </div>
              <div>
                <p className="eyebrow">Since</p>
                <p style={{ margin: "4px 0", fontStyle: "italic" }}>spring 2026</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Outro */}
      <section className="page" style={{ textAlign: "center", paddingBottom: 40 }}>
        <h2 style={{ fontSize: 64, fontStyle: "italic", margin: "16px auto 18px", maxWidth: "20ch" }}>
          More <span style={{ color: "var(--accent-deep)" }}>soon.</span>
        </h2>
        <p style={{ margin: "0 auto 28px", color: "var(--charcoal-soft)" }}>
          We're sewing. =^..^=
        </p>
        <a className="btn btn--ghost" href="about.html">Read our story &nbsp;→</a>

        <figure className="hero-photo hero-photo--small" data-filter={filter} style={{ marginTop: 48 }}>
          <div className="hero-photo__frame">
            <img
              className="hero-photo__img"
              src="uploads/pasted-1777316257525-0.png"
              alt="Two hikers in rain shells under the West Highland Way arch."
            />
            <span className="hero-photo__stamp">'24 10 14</span>
          </div>
        </figure>
      </section>

      <Footer />
    </div>
  );
};

window.HomePage = HomePage;