// Ramp Ranch - production site (Direction B: Control Room).
// Responsive layout via site.css; component logic minimal.

const { useState, useEffect } = React;

const HEADLINES = {
  "headline_a": <>Build the AI coworker your business <span className="accent">actually needs.</span></>,
  "headline_b": <>AI coworkers <span className="accent">for owner/operators.</span></>,
  "headline_c": <>The work that lives in the owner's head, <span className="accent">finally has somewhere to go.</span></>
};
const HEADLINES_PLAIN = {
  "headline_a": "Build the AI coworker your business actually needs.",
  "headline_b": "AI coworkers for owner/operators.",
  "headline_c": "The work that lives in the owner's head, finally has somewhere to go."
};

// Tweak defaults. Wrapped in EDITMODE markers so persistence works.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "headline_a",
  "accent": "#7fa882",
  "showConsole": true,
  "showSafety": true
} /*EDITMODE-END*/;

const App = () => {
  const C = window.RR_CONTENT;
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [navOpen, setNavOpen] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  // Apply accent token live so CSS picks it up
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty(
      "--accent-soft",
      t.accent + "24" // ~14% alpha
    );
  }, [t.accent]);

  // Auto-close mobile menu when clicking a link
  const closeNav = () => setNavOpen(false);

  const heroH1 = HEADLINES[t.headline] || HEADLINES.headline_a;

  return (
    <>
      {/* ───────── NAV ───────── */}
      <nav className="nav">
        <a href="#top" className="nav-brand" onClick={closeNav} style={{ textDecoration: "none" }}>
          <img src="assets/logo-cream.png" alt="Ramp Ranch" />
          <div>
            <div className="name">Ramp Ranch</div>
            <div className="sub">OPS · est. 2025</div>
          </div>
        </a>
        <div className="nav-links">
          {C.nav.map((n) =>
          <a key={n.href} href={n.href}>{n.label}</a>
          )}
        </div>
        <a href="#contact" className="nav-cta nav-cta-desktop" onClick={closeNav}>
          Talk through your workflow
        </a>
        <button
          className="nav-menu-btn"
          aria-expanded={navOpen}
          aria-label="Toggle menu"
          onClick={() => setNavOpen((v) => !v)}>
          
          {navOpen ? "Close" : "Menu"}
        </button>
      </nav>

      <div className={`nav-drawer ${navOpen ? "open" : ""}`}>
        {C.nav.map((n) =>
        <a key={n.href} href={n.href} onClick={closeNav}>{n.label}</a>
        )}
        <a href="#contact" className="nav-cta" onClick={closeNav}>
          Talk through your workflow
        </a>
      </div>

      {/* ───────── HERO ───────── */}
      <section className="hero" id="top">
        <div className="hero-grid-bg" />
        <div className="hero-spotlight" />
        <div className="hero-coords">
          <span className="mono">30.4710° N</span>
          <span className="mono">98.1611° W</span>
        </div>
        <div className="hero-inner">
          <div>
            <span className="status green"><span className="dot" />Online · accepting new operators</span>
            <h1 style={{ marginTop: 36 }}>{heroH1}</h1>
            <p className="lede">{C.hero.sub}</p>
            <div className="hero-ctas">
              <a href={C.hero.primary.href} className="btn-primary">
                {C.hero.primary.label} <span aria-hidden>›</span>
              </a>
              <a href={C.hero.secondary.href} className="btn-secondary">
                {C.hero.secondary.label}
              </a>
            </div>
          </div>

          {t.showConsole && <ConsoleWidget />}
        </div>
      </section>

      {/* ───────── WHAT WE BUILD ───────── */}
      <section className="section" id="what">
        <div className="wrap">
          <div className="section-head">
            <div className="kicker-col"><span className="mono">§ 01 / what we build</span></div>
            <div>
              <h2>{C.what.title}</h2>
              <p>{C.what.lede}</p>
            </div>
          </div>

          <span className="mono h-eyebrow">anatomy · how a coworker thinks</span>
          <div className="anatomy">
            {C.what.anatomy.map((a) =>
            <div className="anatomy-cell" key={a.n}>
                <div className="anatomy-cell-head">
                  <span className="mono" style={{ color: "var(--accent)" }}>{a.n}</span>
                  <span className="dot-accent" />
                </div>
                <h4>{a.title}</h4>
                <p>{a.body}</p>
              </div>
            )}
          </div>

          <span className="mono h-eyebrow">roster · coworkers in service</span>
          <div className="roster">
            <div className="roster-head">
              <span className="mono">ID</span>
              <span className="mono">Role</span>
              <span className="mono col-scope">Scope</span>
              <span className="mono col-surface">Surface</span>
              <span className="mono col-status">Status</span>
            </div>
            {C.what.roster.map((r, i) => {
              const surface = ["inbox", "shopify", "klaviyo", "meta", "web", "shipping", "reports", "google", "support"][i % 9];
              return (
                <div className="roster-row" key={r.role}>
                  <span className="mono">{`CW-${String(i + 1).padStart(2, "0")}`}</span>
                  <div className="roster-role">{r.role}</div>
                  <div className="roster-scope">{r.scope}</div>
                  <span className="mono roster-surface">{surface}</span>
                  <div className="roster-status">
                    <span className="dot" />
                    <span className="mono" style={{ color: "var(--green)" }}>active</span>
                  </div>
                </div>);

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

      {/* ───────── WHO IS THIS FOR ───────── */}
      <section className="section alt">
        <div className="wrap">
          <div className="section-head">
            <div className="kicker-col"><span className="mono">§ 02 / audience</span></div>
            <div>
              <h2>{C.who.title}</h2>
              <p>Narrow on purpose. We are not trying to serve everyone, and that is the point.</p>
            </div>
          </div>

          <div className="who-grid">
            <div className="who-col is-for">
              <div className="who-col-head is-for">
                <span className="dot" />
                <span className="mono label">Built for</span>
              </div>
              {C.who.forList.map((line, i) =>
              <div className="who-row" key={i}>
                  <span className="sigil">+</span>
                  <span>{line}</span>
                </div>
              )}
            </div>
            <div className="who-col is-not">
              <div className="who-col-head is-not">
                <span className="dot" />
                <span className="mono label">{C.who.notTitle}</span>
              </div>
              {C.who.notList.map((line, i) =>
              <div className="who-row" key={i}>
                  <span className="sigil">−</span>
                  <span>{line}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ───────── HOW IT WORKS ───────── */}
      <section className="section" id="how">
        <div className="wrap">
          <div className="section-head">
            <div className="kicker-col"><span className="mono">§ 03 / process</span></div>
            <div>
              <h2>{C.how.title}</h2>
              <p>{C.how.lede}</p>
            </div>
          </div>

          <div className="process">
            {C.how.steps.map((s, i) =>
            <div className="process-cell" key={s.n}>
                <div className="process-cell-head">
                  <span className="mono" style={{ color: "var(--accent)" }}>{s.n}</span>
                  {i < C.how.steps.length - 1 && <span className="process-arrow">›</span>}
                </div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
            )}
          </div>

          {t.showSafety &&
          <div className="safety">
              <span className="mono" style={{ color: "var(--accent)" }}>safety clauses</span>
              <div>
                <h4>Read-only first.</h4>
                <p>
                  Every coworker starts by watching. We don't give it write access to anything until
                  we've seen it operate well and you've signed off on what it's allowed to do.
                </p>
              </div>
              <div>
                <h4>Approvals on what matters.</h4>
                <p>
                  Customer sends, payments, publishing, and production changes all pass through a human review step. Clear logs, real off-switches.
                </p>
              </div>
            </div>
          }
        </div>
      </section>

      {/* ───────── USE CASES ───────── */}
      <section className="section alt">
        <div className="wrap">
          <div className="section-head">
            <div className="kicker-col"><span className="mono">§ 04 / a day in the life</span></div>
            <div>
              <h2>{C.useCases.title}</h2>
              <p>{C.useCases.lede}</p>
            </div>
          </div>

          <div className="timeline">
            {C.useCases.timeline.map((row) =>
            <div className="timeline-row" key={row.time}>
                <div>
                  <div className="timeline-time">{row.time}</div>
                  <span className="mono timeline-label">{row.label}</span>
                </div>
                <div>
                  <h4>{row.title}</h4>
                  <p>{row.body}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ───────── ABOUT ───────── */}
      <section className="section about" id="about">
        <div className="wrap">
          <div className="about-grid">
            <div className="kicker-col"><span className="mono">§ 05 / about</span></div>
            <div className="portrait-col">
              <div className="portrait">
                <img src="assets/jm-portrait.jpg" alt="Jon-Mark Craddock" />
              </div>
              <div className="about-name">{C.about.name}</div>
              <div className="about-role">{C.about.role}</div>
            </div>
            <div className="about-text">
              <h2>Why I built this.</h2>
              {C.about.paras.map((p, i) =>
              <p key={i} className={i === 0 ? "first" : ""}>{p}</p>
              )}
              <div className="about-sig">
                <span className="mono"></span>
                <span className="about-sig-name">JM</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ───────── WHY RAMP RANCH ───────── */}
      <section className="section alt">
        <div className="wrap">
          <div className="section-head">
            <div className="kicker-col"><span className="mono">§ 06 / why ramp ranch</span></div>
            <div>
              <h2>{C.why.title}</h2>
            </div>
          </div>

          <div className="why-grid">
            {C.why.points.map((p, i) =>
            <div className="why-cell" key={p.k}>
                <span className="mono">{`0${i + 1}`}</span>
                <h4>{p.k}.</h4>
                <p>{p.v}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ───────── CONTACT ───────── */}
      <section className="section contact" id="contact">
        <div className="contact-spotlight" />
        <div className="wrap">
          <div className="contact-grid">
            <div className="kicker-col"><span className="mono">§ 07 / contact</span></div>
            <div>
              <h2>{C.contact.title}</h2>
              <p className="lede">{C.contact.lede}</p>

              {submitted ?
              <ThanksCard /> :

              <ContactForm onSubmit={() => setSubmitted(true)} />
              }
            </div>
          </div>
        </div>
      </section>

      {/* ───────── FOOTER ───────── */}
      <footer className="footer">
        <div className="footer-brand" aria-label="Ramp Ranch brand">
          <img src="assets/logo-cream.png" alt="Ramp Ranch" />
          <div className="footer-brand-copy">
            <div className="name">Ramp Ranch</div>
            <div className="sub">We Build AI Coworkers for Digital-First Owners &amp; Operators</div>
          </div>
        </div>
        <div className="footer-meta">
          <a href={`mailto:${C.brand.email}`}>{C.brand.email}</a>
          <span className="mono">© 2026 · ramp ranch · {C.brand.domain}</span>
        </div>
      </footer>

      {/* ───────── TWEAKS PANEL ───────── */}
      <window.TweaksPanel title="Tweaks · Ramp Ranch">
        <window.TweakSection title="Hero">
          <window.TweakSelect
            label="Headline"
            value={t.headline}
            onChange={(v) => setTweak("headline", v)}
            options={[
            { value: "headline_a", label: "Build the AI coworker your business actually needs." },
            { value: "headline_b", label: "AI coworkers for owner/operators." },
            { value: "headline_c", label: "The work that lives in the owner's head, finally has somewhere to go." }]
            } />
          
          <window.TweakToggle
            label="Show morning-brief widget"
            value={t.showConsole}
            onChange={(v) => setTweak("showConsole", v)} />
          
        </window.TweakSection>

        <window.TweakSection title="Accent color">
          <window.TweakColor
            label="Brand accent"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#e0653f", "#c96442", "#d9a05b", "#7fa882", "#6f8fbd"]} />
          
        </window.TweakSection>

        <window.TweakSection title="Process">
          <window.TweakToggle
            label="Show safety-clauses callout"
            value={t.showSafety}
            onChange={(v) => setTweak("showSafety", v)} />
          
        </window.TweakSection>
      </window.TweaksPanel>
    </>);

};

// ───────── Console widget (morning brief mock) ─────────
const ConsoleWidget = () =>
<div className="console" aria-hidden="true">
    <div className="console-head">
      <span className="mono">MORNING_BRIEF.RANGER</span>
      <span className="status green"><span className="dot" />active</span>
    </div>
    <div className="console-time">Tuesday · 05:42 CT · scope: la-matera</div>
    <div className="console-rows">
      {[
    { tag: "SALES", tone: "tag-green", body: "Revenue tracking +14% vs 7-day. AOV stable." },
    { tag: "ADS", tone: "tag-accent", body: "Meta CPM jumped 22% on RR-prospecting set. Worth a look." },
    { tag: "INV", tone: "tag-accent", body: "Black belt at 18 days cover. Suggest draft PO." },
    { tag: "SUPPORT", tone: "tag-mute", body: "3 threads waiting for owner. Drafts ready." },
    { tag: "SHIP", tone: "tag-green", body: "All overnight batches printed. No exceptions." }].
    map((row, i) =>
    <div className="console-row" key={i}>
          <span className={`tag ${row.tone}`}>{row.tag}</span>
          <span className="body">{row.body}</span>
        </div>
    )}
    </div>
    <div className="console-foot">
      <span className="mono">2 items need approval</span>
      <button type="button">Review</button>
    </div>
  </div>;


// ───────── Contact form ─────────
const ContactForm = ({ onSubmit }) => {
  const C = window.RR_CONTENT;
  const [data, setData] = useState({ name: "", email: "", biz: "", work: "" });
  const update = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    // Build a structured mailto so the user can send from their mail client.
    const subject = encodeURIComponent(`Ramp Ranch inquiry: ${data.name || "Inquiry"}`);
    const body = encodeURIComponent(
      `Name: ${data.name}\n` +
      `Email: ${data.email}\n` +
      `Business: ${data.biz}\n\n` +
      `Recurring work taking too much:\n${data.work}\n`
    );
    window.location.href = `mailto:${C.brand.email}?subject=${subject}&body=${body}`;
    onSubmit();
  };

  return (
    <form onSubmit={submit}>
      <div>
        <span className="mono field-label">Your name</span>
        <input type="text" name="name" value={data.name} onChange={update("name")} required />
      </div>
      <div>
        <span className="mono field-label">Email</span>
        <input type="email" name="email" value={data.email} onChange={update("email")} required />
      </div>
      <div className="field-wide">
        <span className="mono field-label">Business or website</span>
        <input type="text" name="biz" value={data.biz} onChange={update("biz")} />
      </div>
      <div className="field-wide">
        <span className="mono field-label">What recurring work is taking too much of you?</span>
        <textarea
          name="work"
          rows="4"
          placeholder="Where you keep being the bottleneck. A few sentences is enough."
          value={data.work}
          onChange={update("work")} />
        
      </div>
      <div className="contact-actions">
        <button type="submit" className="btn-primary">{C.contact.submit}</button>
        <a className="contact-fallback" href={`mailto:${C.brand.email}`}>{C.contact.fallback}</a>
      </div>
    </form>);

};

const ThanksCard = () =>
<div style={{
  marginTop: 56, padding: "28px 32px",
  background: "var(--bg2)", border: "1px solid var(--accent)",
  borderRadius: 6, maxWidth: 640
}}>
    <div className="mono" style={{ color: "var(--accent)", marginBottom: 12 }}>thanks for reaching out</div>
    <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--fg)", margin: 0 }}>
      Your mail client should be opening with a pre-filled message to <strong>jm@rampranch.com</strong>.
      If it didn't, just send a note directly. I read everything that comes in.
    </p>
  </div>;


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