// ───────────── Contact page ─────────────
const TWEAK_DEFAULTS_CONTACT = /*EDITMODE-BEGIN*/{
  "palette": "aurora",
  "grain": true
}/*EDITMODE-END*/;

function FAQ({ accent }) {
  const items = [
    { q: "How quickly will you reply?", a: "Within 24 hours, on weekdays, from the senior team you'd actually work with. Not a salesperson, not an inbox bot." },
    { q: "Do you sign NDAs?", a: "Yes — happy to. Send us yours and we'll countersign, or use ours. We won't talk about your project externally without sign-off." },
    { q: "What's a typical project timeline?", a: "A brand sprint is 6–10 weeks. A full site is 10–16 weeks. A growth retainer kicks in over the first 4–8 weeks and then runs month-to-month." },
    { q: "Can I see references before we start?", a: "Yes. We'll connect you with two recent founders we've worked with — one in your stage, one in your industry where possible." },
    { q: "Do you offer post-launch support?", a: "Always. Every project ends with a 30-day warranty, and most clients move into a small monthly retainer for ongoing work." },
    { q: "What payment methods do you accept?", a: "Bank transfer (AUD / USD / GBP / EUR / INR), Stripe for cards, and the occasional Wise transfer. We invoice 50% upfront, 50% on delivery." },
    { q: "Are you taking on new work right now?", a: "We take on 4–6 new partnerships per year. As of May 2026, we're booking Q3 — four partner slots open." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" style={{ paddingTop: 60 }}>
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> FAQ</span>
          <h2 className="section-title" style={{ marginTop: 22, marginBottom: 56, maxWidth: 760 }}>
            The boring <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>but useful</span> questions.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gap: 0, maxWidth: 920 }}>
          {items.map((it, i) => (
            <Reveal key={it.q} delay={i*40}>
              <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
                <button onClick={()=>setOpen(o => o === i ? -1 : i)} style={{
                  width: "100%", textAlign: "left", background: "transparent", border: "none",
                  padding: "24px 0", cursor: "pointer", color: "#fff",
                  display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
                  fontFamily: "inherit"
                }}>
                  <span className="font-serif" style={{ fontSize: 26, letterSpacing: "-0.015em", textAlign: "left" }}>{it.q}</span>
                  <span style={{
                    width: 40, height: 40, borderRadius: 99, flexShrink: 0,
                    background: open === i ? accent[0] : "rgba(255,255,255,0.04)",
                    color: open === i ? "#07070a" : "#fff",
                    border: `1px solid ${open === i ? "transparent" : "rgba(255,255,255,0.1)"}`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    transition: "all .25s"
                  }}>
                    {open === i ? <I.Minus size={16} stroke={2.2}/> : <I.Plus size={16} stroke={2.2}/>}
                  </span>
                </button>
                {open === i && (
                  <div style={{ paddingBottom: 28, paddingRight: 60, color: "rgba(255,255,255,0.7)", fontSize: 16, lineHeight: 1.65, maxWidth: 700 }} dangerouslySetInnerHTML={{__html: it.a}}/>
                )}
              </div>
            </Reveal>
          ))}
          <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}/>
        </div>
      </div>
    </section>
  );
}

function DirectTeam({ accent }) {
  const people = [
    { n: "Mira Rajan", r: "Founder, Creative", e: "mira@digitacurve.studio", t: "New work & partnerships" },
    { n: "Theo Kassidis", r: "Founder, Engineering", e: "theo@digitacurve.studio", t: "Engineering & product" },
    { n: "Asha Tan", r: "Head of Growth", e: "asha@digitacurve.studio", t: "Paid, SEO, lifecycle" },
    { n: "Careers", r: "Talent & hiring", e: "careers@digitacurve.studio", t: "Open roles & speculative" },
  ];
  return (
    <section className="section" style={{ background: "#0d0d12" }}>
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Direct lines</span>
          <h2 className="section-title" style={{ marginTop: 22, marginBottom: 56, maxWidth: 760 }}>
            Prefer to <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>email</span> a human?
          </h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
          {people.map((p, i) => (
            <Reveal key={p.n} delay={i*60}>
              <a href={`mailto:${p.e}`} className="liquid-glass-strong glow-edge" style={{
                borderRadius: 22, padding: 28, height: "100%",
                display: "flex", flexDirection: "column", gap: 16,
                textDecoration: "none", color: "#fff"
              }}>
                <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase" }}>{p.t}</div>
                <div className="font-serif" style={{ fontSize: 32, letterSpacing: "-0.01em" }}>{p.n}</div>
                <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 14 }}>{p.r}</div>
                <div style={{ marginTop: "auto", color: accent[0], fontSize: 14, display: "flex", alignItems: "center", gap: 6 }}>
                  {p.e} <I.ArrowUpRight size={12} stroke={2}/>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactApp() {
  const t = useSiteTweaks(TWEAK_DEFAULTS_CONTACT);
  const accent = PALETTES[t.palette] || PALETTES.aurora;
  return (
    <SiteChrome accent={accent} t={t}>
      <PageHero
        accent={accent}
        eyebrow="Contact"
        title="Let's start a"
        italic="conversation"
        suffix="that ships."
        sub="We take on 4–6 new partnerships a year. Tell us what you're building and we'll reply in 24 hours — with the team you'd actually work with."
      />

      <Enquiry accent={accent}/>
      <Location accent={accent}/>
      <DirectTeam accent={accent}/>
      <FAQ accent={accent}/>
      <CTABand accent={accent}
        eyebrow="Prefer to talk?"
        title="Book a 30-minute<br/>discovery call."
        cta="Find a time on Calendly"
        href="#"/>
    </SiteChrome>
  );
}

const contactRoot = ReactDOM.createRoot(document.getElementById("root"));
contactRoot.render(<ContactApp/>);