const { useState, useEffect, useRef } = React;

// ——— Inline mark used in nav (clean geometric M, not the raster logo)
const MarkSVG = ({ size = 28, color = "#ece4d3" }) => (
  <svg width={size} height={size} viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M6 52 L6 10 L30 38 L54 10 L54 52" stroke={color} strokeWidth="2.2" fill="none" strokeLinejoin="miter"/>
    <path d="M22 22 L30 14 L38 22" stroke={color} strokeWidth="2.2" fill="none" strokeLinejoin="miter"/>
  </svg>
);

// ——— Reveal-on-scroll wrapper
function Reveal({ children, as: As = "div", delay = 0, className = "", ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.unobserve(el); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={`reveal ${shown ? "in" : ""} ${className}`} {...rest}>{children}</As>;
}

// ——— Top navigation
function Nav({ onApply }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" className="brand" aria-label="Maestro Club home">
          <MarkSVG size={26} color="#ece4d3" />
          <span className="brand-word">Maestro Club</span>
        </a>
        <div className="nav-links">
          <a href="#what">What It Is</a>
          <a href="#builders">Builders + Aspirants</a>
          <a href="#room">What Happens</a>
          <a href="#founding">Founding Circle</a>
          <a href="#apply">Apply</a>
        </div>
        <button className="nav-cta mono" onClick={onApply}>Apply for Founding Circle</button>
      </div>
    </nav>
  );
}

// ——— Hero
function Hero({ onApply, onLearn }) {
  return (
    <header id="top" className="hero" data-screen-label="01 Hero">
      <div className="hero-bg" role="presentation" />
      <div className="container hero-inner">
        <Reveal>
          <div className="hero-eyebrow mono">Maestro Club · Est. 2026 · Brisbane</div>
        </Reveal>
        <Reveal delay={120}>
          <h1>Builders,<br/><em>not browsers.</em></h1>
        </Reveal>
        <Reveal delay={220}>
          <p className="hero-sub">A curated IRL room for people building with AI, agents and new forms of leverage.</p>
        </Reveal>
        <Reveal delay={320}>
          <p className="hero-support">For Builders already creating agentic workflows, vibe-coded products, AI-native businesses and commercial experiments — and for serious Aspirants ready to begin.</p>
        </Reveal>
        <Reveal delay={420}>
          <div className="cta-row">
            <button className="btn btn-primary" onClick={onApply}>
              Apply for Founding Circle
              <span className="btn-arrow">→</span>
            </button>
            <a href="#room" className="btn btn-ghost" onClick={(e)=>{e.preventDefault(); onLearn();}}>
              See What Happens in the Room
            </a>
          </div>
        </Reveal>
        <Reveal delay={520}>
          <div className="hero-foot">
            <span className="dot" />
            <span className="mono" style={{color: "var(--cream-2)", opacity: 0.85}}>Founding Circle · $49/mo · First room capped at ~50</span>
          </div>
        </Reveal>
      </div>
      <div className="hero-rail">
        <span className="mono">Brisbane · IRL · By application</span>
        <div className="rule" />
      </div>
    </header>
  );
}

// ——— Section head helper
function SectionHead({ num, title, kicker }) {
  return (
    <div className="section-head">
      <div className="section-num">{kicker || `Sec. ${num}`}</div>
      <h2 className="section-title" dangerouslySetInnerHTML={{ __html: title }} />
    </div>
  );
}

// ——— "What It Is"
function WhatItIs() {
  return (
    <section id="what" className="sec" data-screen-label="02 What it is">
      <div className="container">
        <Reveal><SectionHead num="01" kicker="01 · What it is" title="The room is <em>the product.</em>" /></Reveal>
        <div className="twocol">
          <div className="mono" style={{color: "var(--muted)"}}>Premise</div>
          <Reveal className="body">
            <p className="lede">Maestro Club is not a passive community, a beginner AI group or another place to collect ideas.</p>
            <p>It is a curated IRL room for people turning AI into working systems, commercial experiments and real capability.</p>
            <p className="muted">Each session is grounded in something real: a working system, a live build, a breakdown of what worked, what broke and what is being built next.</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ——— "Not another AI group"
const NOT_ITEMS = [
  "A beginner AI class.",
  "A passive newsletter.",
  "A Slack group full of noise.",
  "A tool-tourist meetup.",
  "Another place to save ideas and do nothing.",
  "A webinar funnel or course.",
];
function NotAnother() {
  return (
    <section className="sec" data-screen-label="03 Not another AI group">
      <div className="container">
        <Reveal><SectionHead num="02" kicker="02 · Negative space" title="Not another <em>AI group.</em>" /></Reveal>
        <Reveal>
          <div className="not-grid">
            {NOT_ITEMS.map((t, i) => (
              <div key={i} className="not-item">
                <span className="x">N{String(i+1).padStart(2,"0")}</span>
                <span className="label">{t}</span>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal>
          <p className="not-closer">This is for people building, testing, breaking, refining and applying.</p>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Builders + Aspirants (lanyard cards)
function Lanyards() {
  return (
    <section id="builders" className="sec" data-screen-label="04 Builders + Aspirants">
      <div className="container">
        <Reveal><SectionHead num="03" kicker="03 · Membership categories" title="For Builders and <em>Aspirants.</em>" /></Reveal>
        <div className="twocol" style={{marginBottom: 56}}>
          <div className="mono" style={{color: "var(--muted)"}}>The standard</div>
          <Reveal className="body">
            <p className="lede">The field is early. The standard is not perfection. The standard is seriousness.</p>
            <p>Builders are actively creating agentic workflows, AI-native businesses, vibe-coded products, automation stacks, personal operating systems or commercial experiments.</p>
            <p className="muted">Aspirants are serious people on the cusp of building. They may not have a finished system yet, but they are not passive learners, tool tourists or spectators. They are here to understand the standard, find the signal and begin.</p>
          </Reveal>
        </div>
        <Reveal>
          <div className="lanyards">
            <article className="lanyard">
              <span className="corner-tl">MC · 001/B</span>
              <span className="corner-br">CAT · BUILDER</span>
              <h4>Builder</h4>
              <div className="role">Actively shipping</div>
              <p>Actively building with AI, agents, systems or new forms of leverage. Brings working systems into the room.</p>
              <div className="id-row">
                <span>ID · BUILDER</span>
                <span>WT · BLACK</span>
                <span>·</span>
              </div>
            </article>
            <article className="lanyard">
              <span className="corner-tl">MC · 002/A</span>
              <span className="corner-br">CAT · ASPIRANT</span>
              <h4>Aspirant</h4>
              <div className="role">Done watching</div>
              <p>Seriously preparing to build. Not passive. Not browsing. Ready to move. Here to find the signal and begin.</p>
              <div className="id-row">
                <span>ID · ASPIRANT</span>
                <span>WT · BRONZE</span>
                <span>·</span>
              </div>
            </article>
          </div>
        </Reveal>
        <Reveal>
          <p style={{marginTop: 48, fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic', fontSize: 'clamp(20px, 2vw, 26px)', color: 'var(--cream-2)', maxWidth: '46ch'}}>
            You do not need to have built everything already.<br/>You do need to be done watching from the sidelines.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ——— What happens in the room
const HAPPEN = [
  "Live demonstrations of working agentic systems",
  "Vibe-coded product walkthroughs",
  "Agentic workflow breakdowns",
  "AI-native business model discussions",
  "Automation and operating system experiments",
  "What worked, what broke, what changed",
  "Operator-led conversation",
  "Peer signal from people actually building",
];
function Room() {
  return (
    <section id="room" className="sec" data-screen-label="05 What happens in the room">
      <div className="container">
        <Reveal><SectionHead num="04" kicker="04 · Inside the session" title="Every session starts with <em>something real.</em>" /></Reveal>
        <Reveal>
          <div className="happen-grid">
            {HAPPEN.map((t, i) => (
              <div key={i} className="happen-cell">
                <span className="num">{String(i+1).padStart(2,"0")} / {String(HAPPEN.length).padStart(2,"0")}</span>
                <span className="ttl">{t}</span>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal>
          <p className="happen-foot">The point is not to watch another presentation about the future. The point is to see what people are actually building inside it.</p>
        </Reveal>
      </div>
    </section>
  );
}

// ——— What members are building
const BUILDS = [
  "Agentic workflows",
  "Vibe-coded products",
  "AI-native businesses",
  "Automation stacks",
  "Personal operating systems",
  "Content + distribution systems",
  "Service business leverage",
  "Agentpreneur experiments",
  "Internal business systems",
  "Human-at-the-apex architectures",
];
function Building() {
  return (
    <section className="sec" data-screen-label="06 What members are building">
      <div className="container">
        <Reveal><SectionHead num="05" kicker="05 · The build floor" title="What builders bring <em>into the room.</em>" /></Reveal>
        <Reveal>
          <div className="build-grid">
            {BUILDS.map((b, i) => (
              <span key={i} className="build-chip">
                <span className="num">{String(i+1).padStart(2,"0")}</span>
                {b}
              </span>
            ))}
          </div>
        </Reveal>
        <Reveal>
          <div className="build-tail">
            <div>
              <p>Some members are building agents. Some are vibe coding products. Some are redesigning their business. Some are building personal operating systems, content engines, automation stacks or new commercial experiments.</p>
              <p style={{marginTop: 22, color: 'var(--muted)'}}>The common thread is not technical skill.</p>
            </div>
            <div className="stamp">It is momentum.</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Capability becomes visible
const PILLARS = [
  { num: "01", tag: "PRACTICE", title: "Hone expertise", body: "Live sessions, demonstrations and build breakdowns help members sharpen real agentic capability." },
  { num: "02", tag: "SIGNAL", title: "Show capability", body: "Members become known for how they think, build, solve and lead — not just what they claim on a profile." },
  { num: "03", tag: "DISCOVERY", title: "Surface talent", body: "As enterprises and SMEs need people to lead agentic transitions, the Club becomes where serious capability can be identified." },
];

const BRIEFS = [
  {
    type: "AGENT BUILD BRIEF",
    status: "OPEN",
    live: true,
    title: "Customer triage agent for a national services firm.",
    desc: "Replace front-line classification and routing with an agent that handles intent, urgency and escalation.",
    scope: "4–6 weeks",
    fit: "Builder · Agent",
    id: "BB-024 · AGT",
  },
  {
    type: "WORKFLOW BUILD BRIEF",
    status: "OPEN",
    live: true,
    title: "Operator dashboard for an AI-native service business.",
    desc: "Translate manual operator routines into a connected workflow stack with human-at-the-apex review.",
    scope: "3–5 weeks",
    fit: "Builder · Ops",
    id: "BB-031 · WFW",
  },
  {
    type: "TRANSITION LEAD SIGNAL",
    status: "INVITE-ONLY",
    live: false,
    title: "Agentic transition lead for a mid-market SME.",
    desc: "Partner with leadership to redesign the operating model around agents, automation and human leverage.",
    scope: "Engagement",
    fit: "Builder · Lead",
    id: "BB-008 · TLS",
  },
];

const HOW_STEPS = [
  "A business or Maestro venture identifies a build need.",
  "The need is shaped into a clear Build Brief.",
  "Relevant Builders inside the Club can submit an approach.",
  "Humans decide fit. Systems handle the structure.",
];

const AUDIENCE = [
  { ico: "FOR · BUILDERS", title: "For Builders", body: "A way to be seen for practical capability, not just credentials." },
  { ico: "FOR · ASPIRANTS", title: "For Aspirants", body: "A way to understand what real build demand looks like before stepping into larger builds." },
  { ico: "FOR · BUSINESSES", title: "For Businesses", body: "A curated pathway to people already building with AI, agents and new forms of leverage." },
];

function Capability({ onApply }) {
  return (
    <section id="capability" className="sec" data-screen-label="07 Where capability becomes visible">
      <div className="container">
        <Reveal><SectionHead num="06" kicker="06 · Capability layer" title="Where capability becomes <em>visible.</em>" /></Reveal>

        <Reveal>
          <div className="twocol" style={{marginBottom: 24}}>
            <div className="mono" style={{color: "var(--muted)"}}>Premise</div>
            <div className="body">
              <p className="lede">Maestro Club is where practical agentic capability is sharpened, demonstrated and discovered.</p>
            </div>
          </div>
        </Reveal>

        <Reveal>
          <div className="pillar-grid">
            {PILLARS.map((p, i) => (
              <div key={i} className="pillar">
                <span className="num">{p.num}</span>
                <span className="tag">{p.tag}</span>
                <h4>{p.title}</h4>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal>
          <div className="cap-body">
            <div className="label">The shift</div>
            <div className="col">
              <p>Maestro Club is not just a place to talk about what is possible. It is a room where Builders, Aspirants and operators sharpen practical agentic capability through live demonstrations, build breakdowns, peer discussion and real-world Build Briefs.</p>
              <p>Members do more than learn. They show how they think, how they build, how they solve problems and how they lead inside the shift.</p>
            </div>
            <div className="col">
              <p>As more businesses move toward agentic systems, they will need more than tools. They will need people who understand how to translate business needs into agentic workflows, AI-native systems and human-led operating models.</p>
              <p className="italic">Maestro Club becomes the room where that talent can be seen.</p>
            </div>
          </div>
        </Reveal>

        <Reveal>
          <div className="cap-negspace">
            <div className="mono" style={{color: "var(--muted)"}}>Not</div>
            <div className="col">
              This is <strong>not</strong> a public marketplace. <strong>Not</strong> a jobs board. <strong>Not</strong> guaranteed work. It is a signal layer for the people building the next operating model.
            </div>
          </div>
        </Reveal>

        {/* Build Briefs module */}
        <Reveal>
          <div className="briefs-head">
            <div className="label">Module · 06.1</div>
            <div>
              <h3>Build <em>Briefs.</em></h3>
              <p>As the Maestro ecosystem grows, businesses will need people who can build, test and deploy agentic systems in the real world — AI agents, internal workflows, automation stacks, vibe-coded tools, customer-facing systems, operating dashboards, content engines, prospecting systems and other practical builds.</p>
              <p>Instead of scattering those opportunities across the open market, selected build needs can be shaped into Build Briefs and surfaced inside the Club. Members will be able to review relevant Build Briefs and submit build approaches, concepts or proposals where there is a genuine fit.</p>
              <p className="muted">Build Briefs are not guaranteed work. They are one way the room connects demonstrated capability with real-world need.</p>
            </div>
          </div>
        </Reveal>

        <Reveal>
          <div className="brief-grid">
            {BRIEFS.map((b, i) => (
              <article key={i} className={`brief ${!b.live ? "locked" : ""}`}>
                <div className="brief-top">
                  <span className="brief-type">{b.type}</span>
                  <span className="brief-status"><span className="live" /> {b.status}</span>
                </div>
                <h5>{b.title}</h5>
                <p className="desc">{b.desc}</p>
                <div className="meta">
                  <div><span className="k">SCOPE</span><span className="v">{b.scope}</span></div>
                  <div><span className="k">FIT</span><span className="v">{b.fit}</span></div>
                </div>
                <div className="brief-foot">
                  <span className="submit">{b.live ? "SUBMIT APPROACH →" : "INVITE REQUIRED"}</span>
                  <span className="id">{b.id}</span>
                </div>
              </article>
            ))}
          </div>
        </Reveal>

        <div className="brief-note mono">Sample briefs · Visible to members only · Surface inside the Club</div>

        {/* How it works */}
        <div className="how-wrap">
          <Reveal>
            <div className="how-head">
              <div className="label">06.2 · Flow</div>
              <h3>How a brief moves through <em>the room.</em></h3>
            </div>
          </Reveal>
          <Reveal>
            <div className="how-steps">
              {HOW_STEPS.map((s, i) => (
                <div key={i} className="how-step">
                  <div className="step-n">0{i+1}</div>
                  <div className="step-rule" />
                  <p>{s}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>

        {/* Audience cards */}
        <Reveal>
          <div className="aud-grid">
            {AUDIENCE.map((a, i) => (
              <div key={i} className="aud-card">
                <span className="ico">{a.ico}</span>
                <h5>{a.title}</h5>
                <p>{a.body}</p>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Closer + CTA */}
        <Reveal>
          <div className="cap-closer">
            <p>The room does not just create connection. It <em>concentrates capability.</em></p>
            <div className="cta-wrap">
              <button className="btn btn-primary" onClick={onApply}>
                Apply for Founding Circle <span className="btn-arrow">→</span>
              </button>
              <span className="small">Founding Circle · Capped at ~50 · By application</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Why it exists
function Why() {
  return (
    <section className="sec" data-screen-label="08 Why it exists">
      <div className="container">
        <Reveal><SectionHead num="07" kicker="07 · Thesis" title="Because watching is <em>no longer enough.</em>" /></Reveal>
        <div className="twocol">
          <Reveal>
            <p className="why-quote">Most people are still <em>consuming</em> AI content.</p>
          </Reveal>
          <Reveal className="why-body">
            <p>They save threads, watch demos, collect tools and wait for certainty.</p>
            <p>Maestro Club is for the people who have seen enough to know the shift is real — and are ready to build inside it.</p>
            <p style={{color: 'var(--muted)'}}>The Club exists to concentrate signal, standards and capability in one room.</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ——— Founding Circle membership card
const INCLUDES = [
  "IRL Maestro Club sessions",
  "Live system demonstrations",
  "Builder & Aspirant lanyard status",
  "Practical breakdowns of real systems and workflows",
  "Operator-led discussion",
  "Access to the first room of aligned builders",
  "Founder pricing during the Founding Circle period",
];
function Founding({ onApply }) {
  return (
    <section id="founding" className="sec" data-screen-label="09 Founding Circle">
      <div className="container">
        <Reveal><SectionHead num="08" kicker="08 · Membership" title="Founding <em>Circle.</em>" /></Reveal>
        <Reveal>
          <div className="mcard">
            <div>
              <div className="mcard-meta">
                <span>EST · 2026</span>
                <span>·</span>
                <span>BRISBANE</span>
                <span>·</span>
                <span>CAP ≈ 50</span>
              </div>
              <h3>The first room<br/><em>sets the standard.</em></h3>
              <div className="mcard-sub">For the first curated group of approximately fifty members.</div>
              <div className="price-row">
                <span className="ccy">AUD</span>
                <span className="amt">$49</span>
                <span className="per">/ month</span>
              </div>
              <div className="detail">Billed monthly during the Founding Circle period.</div>
              <button className="btn btn-primary mcard-cta" onClick={onApply}>
                Apply for Founding Circle <span className="btn-arrow">→</span>
              </button>
              <p className="standard-note">
                <em>Note ·</em> Standard membership will be AUD $99/month after the Founding Circle period.
              </p>
            </div>
            <div className="mcard-right">
              <div className="includes-title">What is included</div>
              <ul className="includes-list">
                {INCLUDES.map((x, i) => <li key={i}>{x}</li>)}
              </ul>
              <div className="mcard-quote">
                “Founding Members help set the standard that everyone after them inherits. This is not early access. It is standard-setting.”
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Application form
function ApplicationForm() {
  const [role, setRole] = useState("Builder");
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: "", email: "", location: "", building: "", using: "", next: "", why: "", link: ""
  });
  const onChange = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const onSubmit = (e) => {
    e.preventDefault();
    fetch('https://galaxy-intake.lauren-5d2.workers.dev', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        source: 'club',
        firstName: form.name.split(' ')[0] || form.name,
        lastName: form.name.split(' ').slice(1).join(' ') || '',
        email: form.email,
        message: [
          `Role: ${role}`,
          `Location: ${form.location}`,
          `Link: ${form.link}`,
          `Building: ${form.building}`,
          `Using AI: ${form.using}`,
          `Next build: ${form.next}`,
          `Why Club: ${form.why}`,
        ].filter(l => l.split(': ')[1]).join('\n\n')
      })
    }).finally(() => {
      setSubmitted(true);
      setTimeout(() => setSubmitted(false), 6000);
    });
  };
  return (
    <section id="apply" className="sec" data-screen-label="10 Apply">
      <div className="container">
        <Reveal><SectionHead num="09" kicker="09 · Application" title="Applications keep the room <em>high-signal.</em>" /></Reveal>
        <div className="form-wrap">
          <Reveal className="form-side">
            <p>Maestro Club is application-based because the quality of the room matters.</p>
            <p>We are not looking for perfect technical ability. We are looking for intent, momentum and seriousness.</p>
            <p style={{color: 'var(--muted)'}}>Apply if you are actively building, or seriously ready to begin.</p>
            <div className="small">
              All applications are read by a member of the curation team. Decisions are returned within 5 working days.
            </div>
          </Reveal>
          <Reveal>
            <form className="form" onSubmit={onSubmit}>
              <div className="field">
                <label>01 · Name</label>
                <input required value={form.name} onChange={onChange("name")} placeholder="Your full name" />
              </div>
              <div className="field">
                <label>02 · Email</label>
                <input required type="email" value={form.email} onChange={onChange("email")} placeholder="you@domain.com" />
              </div>
              <div className="field">
                <label>03 · Location</label>
                <input value={form.location} onChange={onChange("location")} placeholder="City, country" />
              </div>
              <div className="field">
                <label>04 · Link</label>
                <input value={form.link} onChange={onChange("link")} placeholder="LinkedIn / site / project URL" />
              </div>
              <div className="field full">
                <label>05 · Applying as</label>
                <div className="role-toggle">
                  {["Builder","Aspirant"].map(r => (
                    <button type="button" key={r} className={role === r ? "active" : ""} onClick={() => setRole(r)}>
                      {r}
                    </button>
                  ))}
                </div>
                <div className="hint">{role === "Builder" ? "Actively building with AI, agents, systems or new forms of leverage." : "Seriously preparing to build. Done watching from the sidelines."}</div>
              </div>
              <div className="field full">
                <label>06 · What are you building, or preparing to build?</label>
                <textarea value={form.building} onChange={onChange("building")} placeholder="Describe the systems, products or experiments you're working on." />
              </div>
              <div className="field full">
                <label>07 · How are you currently using AI?</label>
                <textarea value={form.using} onChange={onChange("using")} placeholder="Tools, stacks, workflows, models, agents — what's in your hands today?" />
              </div>
              <div className="field full">
                <label>08 · What do you want to build next?</label>
                <textarea value={form.next} onChange={onChange("next")} placeholder="The next system, product or experiment on your runway." />
              </div>
              <div className="field full">
                <label>09 · Why do you want to be in the room?</label>
                <textarea value={form.why} onChange={onChange("why")} placeholder="What signal, peers or standard are you looking for?" />
              </div>
              <div className="submit-row">
                <span className={`submit-status ${submitted ? "ok" : ""}`}>
                  {submitted ? "✓ Application received. We'll be in touch." : "Reviewed within 5 working days"}
                </span>
                <button type="submit" className="btn btn-primary">
                  Submit Application <span className="btn-arrow">→</span>
                </button>
              </div>
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ——— FAQ
const FAQ_ITEMS = [
  { q: "Do I need to already be building agents?", a: "No. Builders are actively building. Aspirants are seriously preparing to build. You do not need to have built everything already, but you do need to be done watching from the sidelines." },
  { q: "Is this a beginner AI course?", a: "No. Maestro Club is not a beginner AI class. It is an IRL room for people building with AI, agents and new forms of leverage." },
  { q: "Is this online?", a: "Maestro Club is IRL-first, beginning in Brisbane. Online layers may be added later, but the room is the product." },
  { q: "What happens at sessions?", a: "Sessions are grounded in something real: a demonstration, a working system, a live build, a breakdown of what worked and what broke, and a room conversation with people building." },
  { q: "Who should apply?", a: "Founders, operators, professionals, consultants, creators, developers, vibe coders, agentpreneurs, business owners and commercially minded people who are actively building or ready to begin." },
  { q: "Why is it application-based?", a: "To protect the signal of the room. The value of Maestro Club depends on the quality, seriousness and momentum of the people inside it." },
  { q: "What does Founding Circle mean?", a: "Founding Circle is the first curated group of members. Founding Members help set the tone, standards and signal of the room." },
  { q: "What happens after Founding Circle?", a: "Standard membership is expected to be AUD $99/month after the Founding Circle period." },
];
// ——— Founder section
function FounderSection() {
  return (
    <section id="founder" className="sec" data-screen-label="11 Founder">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: '80px',
          alignItems: 'start',
        }} className="founder-grid">
          <Reveal>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bronze)', marginBottom: 20 }}>The Builder Behind the Room</div>
            <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(32px,3.8vw,52px)', fontWeight: 400, lineHeight: 1.1, color: 'var(--cream)', marginBottom: 28 }}>
              Built by someone already <em style={{ fontStyle: 'italic', color: 'var(--bronze-2)' }}>running this model.</em>
            </h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.85 }}>
                Maestro Club exists because Lauren Dare looked for a room like this and couldn't find one.
              </p>
              <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.85 }}>
                Lauren trained as a lawyer, worked as Legal Counsel to a billionaire, and spent the last decade building businesses — including Dare Recruitment, now in its eleventh year. Today she runs a human-led, agent-powered portfolio of ventures from Brisbane, with her lead agent LYRA operating beneath her.
              </p>
              <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.85 }}>
                She is the founder of Maestro Workforce, creator of the Maestro Workforce model, and the author of two books on what it means to remain irreducibly human as intelligence becomes abundant.
              </p>
              <p style={{ fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic', fontSize: 'clamp(18px,1.8vw,22px)', color: 'var(--cream)', lineHeight: 1.45, borderLeft: '2px solid var(--bronze)', paddingLeft: 20, margin: '8px 0' }}>
                She does not teach from the sidelines. She builds from the front. Maestro Club is the room she is pulling the right people into.
              </p>
              <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.85 }}>
                As a Founding Member, you are in the room with her — not in an audience watching a presentation.
              </p>
            </div>
            <div style={{ marginTop: 32 }}>
              <a
                href="https://laurendare.com.au"
                target="_blank"
                rel="noopener"
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                  fontSize: 13, letterSpacing: '0.08em', color: 'var(--bronze-2)',
                  textDecoration: 'none', borderBottom: '1px solid rgba(181,140,90,0.3)',
                  paddingBottom: 3, transition: 'color 0.2s, border-color 0.2s'
                }}
              >
                Full work at laurendare.com.au →
              </a>
            </div>
          </Reveal>
          <Reveal delay={0.15}>
            <div style={{
              borderRadius: 12,
              overflow: 'hidden',
              border: '1px solid var(--line)',
              aspectRatio: '1 / 1',
              background: 'var(--surface-2)'
            }}>
              <img
                src="assets/lauren-portrait.png"
                alt="Lauren Dare"
                loading="lazy"
                style={{ width: '100%', display: 'block', objectFit: 'cover' }}
              />
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .founder-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ——— Books section
function BooksSection() {
  return (
    <section id="books" className="sec" data-screen-label="12 Books">
      <div className="container">
        <Reveal>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bronze)', marginBottom: 20 }}>The intellectual foundation</div>
          <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(32px,3.8vw,52px)', fontWeight: 400, lineHeight: 1.1, color: 'var(--cream)', marginBottom: 16, maxWidth: 680 }}>
            What every serious builder should understand before they <em style={{ fontStyle: 'italic', color: 'var(--bronze-2)' }}>build.</em>
          </h2>
          <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.85, maxWidth: 620, marginBottom: 52 }}>
            Two books sit upstream of everything Maestro Club stands for. Not required reading to apply. But the clearest articulation of why this room exists, what it is being built against, and what the people inside it are trying to become.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, maxWidth: 820 }} className="books-grid">
          <Reveal>
            <div style={{
              background: 'var(--surface-2)',
              border: '1px solid var(--line)',
              borderRadius: 12,
              padding: '36px 32px',
              display: 'flex', flexDirection: 'column', gap: 20,
              height: '100%'
            }}>
              <a href="https://weightofthepail.com" target="_blank" rel="noopener">
                <img src="assets/cover-pail.png" alt="The Weight of the Pail"
                  loading="lazy"
                  style={{ width: '100%', maxWidth: 160, display: 'block', borderRadius: 6, marginBottom: 4 }} />
              </a>
              <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--bronze)', fontFamily: '"JetBrains Mono", monospace' }}>Book One · Diagnosis</div>
              <h3 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 26, fontWeight: 400, color: 'var(--cream)', lineHeight: 1.2, margin: 0 }}>The Weight of the Pail</h3>
              <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.8, margin: 0, flexGrow: 1 }}>
                Names what modern systems have extracted from human life: presence, agency, becoming. The conditions required to remain irreducibly human in the age of abundant intelligence.
              </p>
              <a href="https://weightofthepail.com" target="_blank" rel="noopener"
                style={{ fontSize: 13, color: 'var(--bronze-2)', letterSpacing: '0.06em', textDecoration: 'none', borderBottom: '1px solid rgba(181,140,90,0.3)', paddingBottom: 2, alignSelf: 'flex-start' }}>
                Read more →
              </a>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <div style={{
              background: 'var(--surface-2)',
              border: '1px solid var(--line)',
              borderRadius: 12,
              padding: '36px 32px',
              display: 'flex', flexDirection: 'column', gap: 20,
              height: '100%'
            }}>
              <a href="https://7metaskills.com" target="_blank" rel="noopener">
                <img src="assets/cover-7ms.png" alt="The 7 MetaSkills"
                  loading="lazy"
                  style={{ width: '100%', maxWidth: 160, display: 'block', borderRadius: 6, marginBottom: 4 }} />
              </a>
              <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--bronze)', fontFamily: '"JetBrains Mono", monospace' }}>Book Two · Prescription</div>
              <h3 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 26, fontWeight: 400, color: 'var(--cream)', lineHeight: 1.2, margin: 0 }}>The 7 MetaSkills</h3>
              <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.8, margin: 0, flexGrow: 1 }}>
                The seven irreducibly human capabilities that AI cannot occupy. Written for founders, builders and operators who want to understand what to build in themselves — not just in their systems.
              </p>
              <a href="https://7metaskills.com" target="_blank" rel="noopener"
                style={{ fontSize: 13, color: 'var(--bronze-2)', letterSpacing: '0.06em', textDecoration: 'none', borderBottom: '1px solid rgba(181,140,90,0.3)', paddingBottom: 2, alignSelf: 'flex-start' }}>
                Read more →
              </a>
            </div>
          </Reveal>
        </div>
        <Reveal>
          <p style={{ fontSize: 14, color: 'rgba(181,140,90,0.6)', lineHeight: 1.8, maxWidth: 620, marginTop: 36, fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic' }}>
            Builders in the room are building systems. These books describe the human who should sit above them.
          </p>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 680px) {
          .books-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="sec" data-screen-label="11 FAQ">
      <div className="container">
        <Reveal><SectionHead num="10" kicker="10 · FAQ" title="Common <em>questions.</em>" /></Reveal>
        <Reveal>
          <div className="faq">
            {FAQ_ITEMS.map((item, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{item.q}</span>
                  <span className="ico">+</span>
                </button>
                <div className="faq-a"><div className="faq-a-inner">{item.a}</div></div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ——— Footer
function Footer() {
  return (
    <footer data-screen-label="12 Footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <MarkSVG size={32} color="#ece4d3" />
            <h5>Maestro Club</h5>
            <p style={{fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic', fontSize: 18, color: 'var(--cream-2)', marginBottom: 14}}>Builders, not browsers.</p>
            <p>A curated IRL room for people building with AI, agents and new forms of leverage.</p>
          </div>
          <div className="foot-col">
            <h6>The Club</h6>
            <ul>
              <li><a href="#apply">Apply</a></li>
              <li><a href="#founding">Founding Circle</a></li>
              <li><a href="#room">What Happens</a></li>
              <li><a href="#builders">Builders + Aspirants</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h6>Network</h6>
            <ul>
              <li><a href="https://laurendare.com.au">Lauren Dare</a></li>
              <li><a href="https://maestroworkforce.com">Maestro Workforce</a></li>
              <li><a href="https://theagentmaestro.co/build">Maestro Build</a></li>
              <li><a href="#apply">Contact</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h6>Legal</h6>
            <ul>
              <li><a href="https://laurendare.com.au/legal/privacy.html">Privacy</a></li>
              <li><a href="https://laurendare.com.au/legal/terms.html">Terms</a></li>
              <li><a href="#">Code of conduct</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Maestro Club · Brisbane</span>
          <span>By application only</span>
        </div>
      </div>
    </footer>
  );
}

// ——— Quick-apply modal (light-weight; routes the user to the in-page form)
function Modal({ open, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div className={`modal-back ${open ? "show" : ""}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>ESC ✕</button>
        <div className="meta">FOUNDING CIRCLE · AUD $49/MO</div>
        <h3>The first room sets the standard.</h3>
        <p>Founding Circle is application-based and limited to approximately fifty members. We're looking for intent, momentum and seriousness — not a perfect résumé.</p>
        <a href="#apply" className="btn btn-primary" onClick={onClose}>
          Continue to Application <span className="btn-arrow">→</span>
        </a>
      </div>
    </div>
  );
}

// ——— App
function App() {
  const [modal, setModal] = useState(false);
  const openApply = () => {
    setModal(true);
  };
  const scrollToRoom = () => {
    const el = document.getElementById("room");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });
  };
  // smooth-scroll for nav links
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id || id === "top") {
        if (id === "top") { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }
        return;
      }
      const el = document.getElementById(id);
      if (el) {
        e.preventDefault();
        window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });
      }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);
  return (
    <>
      <Nav onApply={openApply} />
      <Hero onApply={openApply} onLearn={scrollToRoom} />
      <WhatItIs />
      <NotAnother />
      <Lanyards />
      <Room />
      <Building />
      <Capability onApply={openApply} />
      <Why />
      <Founding onApply={openApply} />
      <ApplicationForm />
      <FounderSection />
      <BooksSection />
      <FAQ />
      <Footer />
      <Modal open={modal} onClose={() => setModal(false)} />
    </>
  );
}

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