// ethos-index.jsx — Kaya Our Ethos page

// ── SVG helpers ───────────────────────────────────────────────────────────────
const ArrowRight = () => (
  <svg width="14" height="10" viewBox="0 0 24 14" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="0" y1="7" x2="22" y2="7"/><polyline points="16 1 22 7 16 13"/>
  </svg>
);
const ArrowExternal = () => (
  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="7" y1="17" x2="17" y2="7"/><polyline points="9 7 17 7 17 15"/>
  </svg>
);

// ── page navigation ───────────────────────────────────────────────────────────
const handleNavigate = (id) => {
  if (id === "ethos") {
    window.scrollTo({ top: 0, behavior: "smooth" });
  } else if (id === "subscribe") {
    document.querySelector(".ethos-join")?.scrollIntoView({ behavior: "smooth" });
  } else if (id === "journal") {
    window.location.href = "/journal";
  } else if (id === "refined") {
    window.location.href = "/refined";
  } else {
    window.location.href = `/#${id}`;
  }
};

// ── hero ──────────────────────────────────────────────────────────────────────
const EthosHero = () => {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setMounted(true), 80);
    return () => clearTimeout(t);
  }, []);

  return (
    <section className="ethos-hero">
      <div className={"ethos-hero__bg " + (mounted ? "is-in" : "")}>
        <img src="assets/images/photo-human-stairwell.jpg" alt="" />
      </div>
      <div className="ethos-hero__overlay" />
      <div className="ethos-hero__content">
        <div className="ethos-hero__top">
          <span className={"ethos-hero__meta " + (mounted ? "is-in" : "")}>Our Ethos</span>
          <span className={"ethos-hero__meta " + (mounted ? "is-in" : "")}>— A declaration of belief</span>
        </div>
        <div className="ethos-hero__main">
          <h1 className={"ethos-hero__title " + (mounted ? "is-in" : "")}>
            Refined,<br />not timid.
          </h1>
          <p className={"ethos-hero__sub " + (mounted ? "is-in" : "")}>
            You're reading this because you believe in more than what's seen at the surface.
            You care about intention. You want design — and the stories behind it — to feel
            alive, human, and true.
          </p>
        </div>
        <div className={"ethos-hero__foot " + (mounted ? "is-in" : "")}>
          <span className="ethos-hero__scroll">scroll</span>
        </div>
      </div>
    </section>
  );
};

// ── opening gateway ───────────────────────────────────────────────────────────
const EthosOpening = () => (
  <section className="ethos-opening">
    <div className="ethos-opening__inner">
      <KayaReveal className="ethos-opening__left">
        <span className="eyebrow eyebrow--rust eyebrow--rule">We are Kaya</span>
        <p>
          A collective of storytellers, designers, and image-makers who believe that
          spaces only gain meaning through the people who inhabit them. Our work is shaped
          by the relationship between humans and their environments — the emotions, rituals,
          and lived experiences that bring design to life.
        </p>
        <p>
          You care about intention. You want design — and the stories behind it — to feel
          alive, human, and true.
        </p>
      </KayaReveal>
      <KayaReveal className="ethos-opening__quote" delay={160}>
        <blockquote>
          spaces only gain meaning through the people who inhabit them.
        </blockquote>
      </KayaReveal>
    </div>
  </section>
);

// ── principle block ───────────────────────────────────────────────────────────
const EthosPrinciple = ({ number, title, paragraphs, image, reversed = false, bg = "bone", accent = "rust" }) => (
  <section className={["ethos-principle", `ethos-principle--${bg}`, reversed ? "ethos-principle--reversed" : ""].filter(Boolean).join(" ")}>
    <div className="ethos-principle__inner">
      <KayaReveal className="ethos-principle__media">
        <img src={image} alt="" loading="lazy" />
      </KayaReveal>
      <div className="ethos-principle__body">
        <KayaReveal>
          <span className={`ethos-principle__num eyebrow eyebrow--${accent}`}>{number}</span>
        </KayaReveal>
        <KayaReveal as="h2" className="ethos-principle__title" delay={120}>
          {title}
        </KayaReveal>
        {paragraphs.map((para, i) => (
          <KayaReveal key={i} as="p" delay={220 + i * 80}>
            {para}
          </KayaReveal>
        ))}
      </div>
    </div>
  </section>
);

// ── manifesto (principle 03 — typographic moment) ─────────────────────────────
const EthosManifesto = () => (
  <section className="ethos-manifesto">
    <div className="ethos-manifesto__inner">
      <KayaReveal>
        <span className="eyebrow eyebrow--rule ethos-manifesto__eyebrow">03 · Quiet confidence over loud declarations</span>
      </KayaReveal>
      <div className="ethos-manifesto__statement">
        <KayaReveal as="span" className="ethos-manifesto__word" delay={80}>
          Refined,
        </KayaReveal>
        <KayaReveal as="span" className="ethos-manifesto__word ethos-manifesto__word--italic" delay={260}>
          not timid.
        </KayaReveal>
      </div>
      <KayaReveal className="ethos-manifesto__body" delay={480}>
        <p>We don&rsquo;t sensationalize. We don&rsquo;t dramatize.</p>
        <p>
          We honor nuance, quiet power, and presence — the kind of storytelling
          that <em>listens as deeply as it speaks.</em>
        </p>
        <p>
          Every image, every narrative, every frame is crafted with clarity and intention.
        </p>
      </KayaReveal>
    </div>
  </section>
);

// ── join / CTA ────────────────────────────────────────────────────────────────
const EthosJoin = () => {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const val = email.trim();
    if (!val) return;
    const cfg = window.KAYA_BEEHIIV || {};
    const url = `${cfg.subscribeUrl}?email=${encodeURIComponent(val)}`;
    window.open(url, "_blank", "noopener,noreferrer");
    setDone(true);
  };

  return (
    <section className="ethos-join">
      <div className="ethos-join__inner">

        <KayaReveal className="ethos-join__header">
          <span className="eyebrow" style={{ color: "#000000" }}>— An invitation</span>
          <h2 className="ethos-join__title">
            If you believe this:<br /><em>join us.</em>
          </h2>
          <p className="ethos-join__sub">
            Subscribe, follow, engage. Send us your stories, your spaces, your ideas.
            Bring your curiosity, your standards, your boldness.
          </p>
        </KayaReveal>

        <div className="ethos-join__grid">
          <KayaReveal className="ethos-join__col" delay={80}>
            <h3 className="ethos-join__col-label">The Newsletter</h3>
            <p className="ethos-join__col-body">
              New essays arrive weekly, on a Wednesday, somewhere in the morning.
              No noise. One letter, once a week.
            </p>
            {done ? (
              <div className="ethos-form-done">— Thank you. Welcome in.</div>
            ) : (
              <form className="ethos-form" onSubmit={submit}>
                <div className="ethos-form__row">
                  <input
                    type="email"
                    placeholder="your email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    aria-label="Email address"
                    required
                  />
                  <button type="submit">
                    Subscribe <ArrowRight />
                  </button>
                </div>
                <span className="ethos-form__note">No noise. One letter, once a week.</span>
              </form>
            )}
          </KayaReveal>

          <KayaReveal className="ethos-join__col" delay={180}>
            <h3 className="ethos-join__col-label">Watch &amp; Follow</h3>
            <p className="ethos-join__col-body">
              Cinematic episodes, field notes, and design dispatches — across our channels.
            </p>
            <div className="ethos-join__links">
              <a className="btn-quiet btn-quiet--ivory"
                 href="https://youtube.com/@kaya" target="_blank" rel="noopener">
                YouTube <ArrowExternal />
              </a>
              <a className="btn-quiet btn-quiet--ivory" href="#">
                Instagram <ArrowExternal />
              </a>
              <a className="btn-quiet btn-quiet--ivory" href="#">
                Are.na <ArrowExternal />
              </a>
            </div>
          </KayaReveal>

          <KayaReveal className="ethos-join__col" delay={280}>
            <h3 className="ethos-join__col-label">Get In Touch</h3>
            <p className="ethos-join__col-body">
              For commissions, collaborations, or a quiet conversation about a space —
              we&rsquo;d be glad to hear from you.
            </p>
            <a className="btn-quiet btn-quiet--ivory" href="mailto:hello@refinedbykaya.com">
              hello@refinedbykaya.com <ArrowRight />
            </a>
          </KayaReveal>
        </div>

      </div>
    </section>
  );
};

// ── belief statement (sits before the join section) ───────────────────────────
const EthosBelief = () => (
  <section className="ethos-belief">
    <KayaReveal className="ethos-belief__inner">
      <p>
        If you believe design is about more than looks<br />
        If you believe stories are built around people, not just spaces<br />
        If you believe in quiet confidence, creative risk, and environments that feel<br />
        <em>Then come, step inside — this is Kaya.</em>
      </p>
    </KayaReveal>
  </section>
);

// ── page root ─────────────────────────────────────────────────────────────────
const EthosPage = () => (
  <div className="ethos-page">
    <KayaNav active="ethos" onNavigate={handleNavigate} />

    <EthosHero />
    <EthosOpening />

    <EthosPrinciple
      number="01"
      title="Architecture is more than walls."
      paragraphs={[
        "A space is not defined by structure alone, but by the people it holds. Their memories, their rhythms, their way of being. The choices they make. The lives they build within it.",
        "Design becomes powerful when it reflects humanity — the convictions, stories, and care behind every line, curve, and material.",
      ]}
      image="assets/images/photo-living-room.jpg"
      bg="bone"
      accent="rust"
    />

    <EthosPrinciple
      number="02"
      title="Design isn't distant."
      paragraphs={[
        "We reject the idea that architecture and design exist apart from the people they serve. At Kaya, we dissolve that separation — revealing how environments shape us, support us, and mirror who we are.",
        "We connect architects, designers, and curious people who want to understand design not as an object, but as an experience.",
      ]}
      image="assets/images/photo-dining-light.jpg"
      reversed
      bg="ivory"
      accent="rust"
    />

    <EthosManifesto />

    <EthosPrinciple
      number="04"
      title="Rootedness doesn't limit you."
      paragraphs={[
        "Our name means capable — and that's what design should be: capable of emotion, capable of honesty, capable of holding human stories.",
        "Kaya reflects our belief that capability isn't measured in scale, but in meaning — in how deeply a space connects with the people who move through it.",
      ]}
      image="assets/images/photo-human-arches.jpg"
      bg="bone"
      accent="rust"
    />

    <EthosPrinciple
      number="05"
      title="Visual storytelling as craft."
      paragraphs={[
        "We aren't here to catalogue beautiful rooms. We reveal the tension, ambition, and humanity behind them — how light moves, how space breathes, how environments respond to the lives inside them.",
        "Our imagery and narrative work together to show design not just as a composition, but as a lived experience.",
      ]}
      image="assets/images/photo-patio-twilight.jpg"
      reversed
      bg="ivory"
      accent="rust"
    />

    {/* TODO (future revision): make the beliefs section more high-impact using
        photography and a scroll-based editorial effect, similar to the T.D.
        Architects transformation section. The existing "I believe" statements
        should become part of a more cinematic scroll experience once the final
        images are available. */}
    <EthosBelief />
    <EthosJoin />
    <KayaFooter basePath="index.html" />
  </div>
);

ReactDOM.createRoot(document.getElementById("root")).render(<EthosPage />);