// Tayan landing page — React app
// Dark-first, calm, technical-but-human.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "green",
  "texture": "dots",
  "heroVariant": "wordmark",
  "showCursorGlow": true,
  "philosophyLayout": "grid"
}/*EDITMODE-END*/;

// ── Accent palette options ─────────────────────────────────────────────────
const ACCENTS = {
  green:  { dark: { c: "oklch(0.74 0.07 155)", soft: "oklch(0.74 0.07 155 / 0.12)" },
            light:{ c: "oklch(0.5 0.06 155)",  soft: "oklch(0.5 0.06 155 / 0.1)" } },
  slate:  { dark: { c: "oklch(0.72 0.06 240)", soft: "oklch(0.72 0.06 240 / 0.12)" },
            light:{ c: "oklch(0.48 0.06 240)", soft: "oklch(0.48 0.06 240 / 0.1)" } },
  warm:   { dark: { c: "oklch(0.86 0.04 80)",  soft: "oklch(0.86 0.04 80 / 0.14)" },
            light:{ c: "oklch(0.5 0.04 60)",   soft: "oklch(0.5 0.04 60 / 0.1)" } },
};

// ── Hooks ──────────────────────────────────────────────────────────────────
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -10% 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function useScrolled(threshold = 12) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);
  return scrolled;
}

// ── Logo mark (SVG) ────────────────────────────────────────────────────────
function MarkGlyph({ size = 22 }) {
  return (
    <span className="mark-glyph" style={{ width: size, height: size }} aria-hidden="true" />
  );
}

// ── Top nav ────────────────────────────────────────────────────────────────
function Nav() {
  const scrolled = useScrolled();
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a className="mark" href="#top">
          <MarkGlyph size={22} />
          <span>Tayan</span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="#products">Products</a>
          <a href="#philosophy">Philosophy</a>
          <a href="#founder">About</a>
          <a className="nav-cta" href="mailto:hello@tayan.co">hello@tayan.co</a>
        </nav>
      </div>
    </header>
  );
}

// ── Hero ──────────────────────────────────────────────────────────────────
function Hero({ variant, showGlow }) {
  const wrapRef = React.useRef(null);
  const glowRef = React.useRef(null);

  // Cursor-tracked spotlight
  React.useEffect(() => {
    if (!showGlow) return;
    const wrap = wrapRef.current;
    const glow = glowRef.current;
    if (!wrap || !glow) return;
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width) * 100;
      const y = ((e.clientY - r.top) / r.height) * 100;
      glow.style.background = `radial-gradient(circle 380px at ${x}% ${y}%, var(--accent-soft), transparent 70%)`;
      glow.style.opacity = "1";
    };
    const onLeave = () => { glow.style.opacity = "0"; };
    wrap.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    return () => {
      wrap.removeEventListener("mousemove", onMove);
      wrap.removeEventListener("mouseleave", onLeave);
    };
  }, [showGlow]);

  return (
    <section className="hero" id="top" ref={wrapRef} style={{ position: "relative" }}>
      <div
        ref={glowRef}
        aria-hidden="true"
        style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          opacity: 0, transition: "opacity .4s ease", zIndex: 0,
          mixBlendMode: "screen",
        }}
      />
      <div className="wrap" style={{ position: "relative" }}>
        <div className="reveal" style={{ marginBottom: 56 }}>
          <span className="eyebrow">Independent software studio · Est. 2023</span>
        </div>

        <div className="hero-row">
          <div>
            {variant === "wordmark" && (
              <div className="reveal d1">
                <h1 className="hero-mark">
                  Tayan<span className="accent-dot" aria-hidden="true" />
                </h1>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 18, flexWrap: "wrap" }}>
                  <span style={{ fontSize: 26, fontWeight: 300, letterSpacing: "-0.01em", color: "var(--fg)", fontFamily: "'IBM Plex Sans Thai', var(--ff-sans)" }} lang="th">
                    ทะยาน
                  </span>
                  <span style={{ fontFamily: "var(--ff-mono)", fontSize: 11.5, letterSpacing: "0.08em", color: "var(--fg-dim)", textTransform: "uppercase" }}>
                    /tà-yaan/ — to soar, to leap forward
                  </span>
                </div>
              </div>
            )}
            {variant === "tagline" && (
              <h1 className="reveal d1" style={{ fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 1, fontWeight: 300, letterSpacing: "-0.035em", maxWidth: "16ch" }}>
                Quiet tools for focused work<span style={{ color: "var(--accent)" }}>.</span>
              </h1>
            )}
            {variant === "monogram" && (
              <div className="reveal d1" style={{ display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
                <Monogram />
                <h1 style={{ fontSize: "clamp(56px, 8vw, 112px)", letterSpacing: "-0.04em", fontWeight: 300 }}>
                  Tayan
                </h1>
              </div>
            )}
            <p className="hero-tagline reveal d2">
              Build with clarity.<br />
              Software crafted with intention.
            </p>
          </div>

          <div className="hero-meta">
            <p className="hero-desc reveal d3">
              Tayan builds focused software tools for people who value clarity, speed, and freedom — made slowly, by hand, in small batches.
            </p>
            <div className="hero-cta-row reveal d4">
              <a className="btn btn-primary" href="#products">
                See products
                <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                  <path d="M3 7h8m-3-3 3 3-3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </a>
              <a className="btn btn-ghost" href="#founder">About</a>
            </div>
          </div>
        </div>

        <div className="hero-strip reveal d4">
          <div>
            Origin
            <span>Chiang Mai, TH</span>
          </div>
          <div>
            Status
            <span>Independent · Profitable</span>
          </div>
          <div>
            Headcount
            <span>One — by design</span>
          </div>
          <div>
            Shipping
            <span>v2026.05</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// Hero monogram variant — large rotated square + circle composition
function Monogram() {
  return (
    <div style={{ position: "relative", width: 140, height: 140, flex: "none" }} aria-hidden="true">
      <div style={{
        position: "absolute", inset: 8,
        background: "var(--accent)", borderRadius: 18,
        transform: "rotate(-10deg)",
      }} />
      <div style={{
        position: "absolute", inset: 18,
        border: "1.5px solid var(--fg)", borderRadius: 14,
        transform: "rotate(6deg)",
      }} />
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        width: 16, height: 16, borderRadius: "50%",
        background: "var(--bg)", border: "1.5px solid var(--fg)",
        transform: "translate(-50%, -50%)",
      }} />
    </div>
  );
}

// ── Philosophy ────────────────────────────────────────────────────────────
const PHILOSOPHY = [
  { n: "01", body: "Built slowly, carefully, and independently. We answer to our craft and our customers — no one else." },
  { n: "02", body: "We make tools that remove noise instead of adding more. A good tool earns its place by disappearing." },
  { n: "03", body: "Software should feel calm, fast, and dependable. Like a well-made instrument you reach for every day." },
];

function Philosophy({ layout }) {
  return (
    <section id="philosophy">
      <div className="wrap">
        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "baseline", maxWidth: 880 }}>
          <span className="eyebrow">Philosophy</span>
          <h2 style={{ maxWidth: "20ch" }}>
            We believe software should feel like
            <em style={{ fontFamily: "var(--ff-serif)", fontStyle: "italic", color: "var(--accent)" }}> craft</em>
            , not noise.
          </h2>
        </div>

        {layout === "grid" ? (
          <div className="philosophy-grid">
            {PHILOSOPHY.map((p, i) => (
              <div key={p.n} className={"philosophy-card reveal d" + (i + 1)}>
                <span className="num">{p.n} —</span>
                <p className="body">{p.body}</p>
              </div>
            ))}
          </div>
        ) : (
          <ol style={{ listStyle: "none", padding: 0, margin: "64px 0 0", display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--line)" }}>
            {PHILOSOPHY.map((p, i) => (
              <li key={p.n} className={"reveal d" + (i + 1)}
                  style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, padding: "32px 0", borderBottom: "1px solid var(--line)", alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--ff-mono)", fontSize: 12, color: "var(--fg-dim)", letterSpacing: "0.1em" }}>{p.n}</span>
                <p style={{ fontSize: 22, lineHeight: 1.4, fontWeight: 400, letterSpacing: "-0.018em", maxWidth: "44ch" }}>{p.body}</p>
              </li>
            ))}
          </ol>
        )}
      </div>
    </section>
  );
}

// ── Products ──────────────────────────────────────────────────────────────
const PRODUCTS = [
  {
    name: "Pulse",
    tagline: "tayan.co/pulse",
    desc: "Unified monitoring for issue trackers. One quiet inbox for the signals that matter across GitHub, Linear, and Jira.",
    status: "live",
    glyph: (
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
        <path d="M1 9h3.5l1.5-5 3 11 2-7 1.5 4h4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  {
    name: "Lantern",
    tagline: "tayan.co/lantern",
    desc: "AI enterprise search that respects context. Find the document, decision, or thread you half-remember — across every tool.",
    status: "beta",
    glyph: (
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
        <circle cx="8" cy="8" r="5" stroke="currentColor" strokeWidth="1.3" />
        <path d="M12 12l4 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
      </svg>
    ),
  },
  {
    name: "Draft",
    tagline: "tayan.co/draft",
    desc: "Lightweight workflow automation. Connect the small repeating things and let them run themselves — without a YAML file in sight.",
    status: "soon",
    glyph: (
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
        <path d="M3 4h12M3 9h8M3 14h12" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
      </svg>
    ),
  },
];

const STATUS_LABEL = { live: "Live", beta: "In beta", soon: "Coming soon" };

function Products() {
  return (
    <section id="products" style={{ background: "color-mix(in oklab, var(--bg-2) 60%, var(--bg))" }}>
      <div className="wrap">
        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 28, alignItems: "baseline" }}>
          <span className="eyebrow">Products</span>
          <h2 style={{ maxWidth: "20ch" }}>Three tools, made to last.</h2>
          <span style={{ fontFamily: "var(--ff-mono)", fontSize: 12, color: "var(--fg-dim)", letterSpacing: "0.04em" }}>
            03 / 03
          </span>
        </div>

        <div className="products-list">
          {PRODUCTS.map((p, i) => (
            <a key={p.name} className={"product reveal d" + (i + 1)} href={`#${p.name.toLowerCase()}`}>
              <div className="product-head">
                <div className="product-glyph">{p.glyph}</div>
                <div>
                  <div className="product-name">{p.name}</div>
                  <div className="product-tagline">{p.tagline}</div>
                </div>
              </div>
              <p className="product-desc">{p.desc}</p>
              <div className="product-status" data-status={p.status}>
                <span className="pip" />
                <span>{STATUS_LABEL[p.status]}</span>
              </div>
            </a>
          ))}
        </div>

        <div className="reveal" style={{ marginTop: 48, display: "flex", justifyContent: "flex-end" }}>
          <a className="btn btn-ghost" href="mailto:hello@tayan.co">Get notified about new releases</a>
        </div>
      </div>
    </section>
  );
}

// ── Founder ───────────────────────────────────────────────────────────────
function Founder() {
  return (
    <section id="founder">
      <div className="wrap founder">
        <div className="reveal">
          <div className="founder-portrait">
            <span className="label">Portrait — placeholder</span>
          </div>
        </div>
        <div className="founder-text">
          <span className="eyebrow reveal">Founder</span>
          <h2 className="reveal d1" style={{ marginTop: 24 }}>
            Founded by Krit Sandhu, an independent developer from Thailand.
          </h2>
          <p className="reveal d2" style={{ marginTop: 24, fontSize: 14, color: "var(--fg-mute)", fontFamily: "var(--ff-mono)", letterSpacing: "0.01em", lineHeight: 1.6, maxWidth: "44ch" }}>
            <span lang="th" style={{ fontFamily: "'IBM Plex Sans Thai', var(--ff-sans)", fontSize: 16, color: "var(--fg)", marginRight: 10 }}>ทะยาน</span>
            — Thai for <em style={{ fontFamily: "var(--ff-serif)", fontStyle: "italic", color: "var(--fg)" }}>to soar, to leap forward</em>. A quiet kind of momentum.
          </p>
          <p className="quote reveal d2">
            “I started Tayan to build the kind of software I wanted to use — quiet, considered, and designed to last longer than the next funding round.”
          </p>
          <p className="sig reveal d3">
            <b>Krit Sandhu</b> — founder &amp; sole maker
          </p>
          <div className="links reveal d4">
            <a href="mailto:krit@tayan.co">Email</a>
            <a href="#">Read journal</a>
            <a href="#">Follow on RSS</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="mark" href="#top">
              <MarkGlyph size={20} />
              <span>Tayan</span>
            </a>
            <p className="small">
              An independent software studio. Quiet tools for focused work.
            </p>
          </div>
          <div className="footer-col">
            <h4>Products</h4>
            <ul>
              <li><a href="#products">Pulse</a></li>
              <li><a href="#products">Lantern</a></li>
              <li><a href="#products">Draft</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Studio</h4>
            <ul>
              <li><a href="#philosophy">Philosophy</a></li>
              <li><a href="#founder">About</a></li>
              <li><a href="#">Journal</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Elsewhere</h4>
            <ul>
              <li><a href="mailto:hello@tayan.co">hello@tayan.co</a></li>
              <li><a href="https://github.com/tayanco" target="_blank" rel="noreferrer">GitHub</a></li>
              <li><a href="#">RSS</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>tayan.co</span>
          <span>© 2026 Tayan Studio. All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
}

// ── App ───────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  // Apply theme + accent + texture to DOM
  React.useEffect(() => {
    document.body.dataset.theme = t.theme;
    const tex = document.getElementById("texLayer");
    if (tex) tex.dataset.tex = t.texture;
    const accent = ACCENTS[t.accent]?.[t.theme] ?? ACCENTS.green[t.theme];
    document.documentElement.style.setProperty("--accent", accent.c);
    document.documentElement.style.setProperty("--accent-soft", accent.soft);
  }, [t.theme, t.accent, t.texture]);

  return (
    <>
      <Nav />
      <main>
        <Hero variant={t.heroVariant} showGlow={t.showCursorGlow} />
        <Philosophy layout={t.philosophyLayout} />
        <Products />
        <Founder />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Mode"
            value={t.theme}
            options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakRadio
            label="Accent hue"
            value={t.accent}
            options={[
              { value: "green", label: "Green" },
              { value: "slate", label: "Slate" },
              { value: "warm",  label: "Warm" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>

        <TweakSection label="Texture">
          <TweakRadio
            label="Background"
            value={t.texture}
            options={[
              { value: "dots",  label: "Dots" },
              { value: "grid",  label: "Grid" },
              { value: "noise", label: "Noise" },
              { value: "none",  label: "None" },
            ]}
            onChange={(v) => setTweak("texture", v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio
            label="Treatment"
            value={t.heroVariant}
            options={[
              { value: "wordmark", label: "Wordmark" },
              { value: "tagline",  label: "Tagline" },
              { value: "monogram", label: "Monogram" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Cursor spotlight"
            value={t.showCursorGlow}
            onChange={(v) => setTweak("showCursorGlow", v)}
          />
        </TweakSection>

        <TweakSection label="Philosophy">
          <TweakRadio
            label="Layout"
            value={t.philosophyLayout}
            options={[
              { value: "grid", label: "Grid" },
              { value: "list", label: "List" },
            ]}
            onChange={(v) => setTweak("philosophyLayout", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);