// Record (testimonials) + FAQ + CTA + Footer — bottom half of the page.

function RecordSection() {
  const quotes = [
    {
      q: "They called our regulars by name in the first meeting. The site reads like our shop. Leads tripled inside a month.",
      who: 'Greta Hjelmstad',
      role: 'Owner · Hjelmstad Hardware, Est. 1962',
      yrs: '3rd generation',
    },
    {
      q: "The quote tool pays for itself. I stopped answering 'how much' texts at 10pm. Every lead is just there, in order.",
      who: 'Marco Esposito',
      role: 'Owner · Esposito Tile & Stone',
      yrs: '18 years',
    },
    {
      q: "No deck, no kick-off ritual. Just a scope and a start date. I got one link, one bill, one person to call.",
      who: 'Dr. Aileen Chen',
      role: 'Founder · Ridgeline Veterinary',
      yrs: '11 years',
    },
  ];
  const [i, setI] = React.useState(0);
  return (
    <section id="record" className="relative py-24 md:py-32" style={{ background: 'var(--parchment)' }}>
      <div className="max-w-[1680px] mx-auto px-6 md:px-10">
        <div className="flex items-center gap-4 mb-6">
          <span className="h-px w-10" style={{ background: 'var(--summit)' }} />
          <span className="mono-label" style={{ color: 'rgba(26,36,54,0.55)' }}>The record · in their words</span>
        </div>
        <h2 className="font-display font-extrabold mb-14" style={{ fontSize: 'clamp(2.5rem, 6vw, 5.5rem)', lineHeight: 1.02, letterSpacing: '-0.018em', color: 'var(--abyss)' }}>
          <span className="italic font-normal" style={{ color: 'var(--summit)' }}>From</span> the people we've built for.
        </h2>

        <div className="grid grid-cols-1 lg:grid-cols-[1.3fr_1fr] gap-12 lg:gap-20 items-start">
          <div className="relative">
            <svg width="80" height="60" viewBox="0 0 80 60" className="mb-5" style={{ color: 'var(--summit)', opacity: 0.25 }}>
              <text x="0" y="58" fontFamily="Space Grotesk" fontWeight="700" fontSize="100" fill="currentColor">"</text>
            </svg>
            <blockquote className="font-display font-semibold" style={{ fontSize: 'clamp(1.5rem, 2.8vw, 2.4rem)', lineHeight: 1.18, letterSpacing: '-0.015em', color: 'var(--abyss)', textWrap: 'balance' }}>
              {quotes[i].q}
            </blockquote>
            <div className="mt-8 flex items-center gap-5">
              <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: 'var(--abyss)', color: 'var(--parchment)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
                {quotes[i].who.split(' ').map(n => n[0]).join('').slice(0, 2)}
              </div>
              <div>
                <div className="font-display font-semibold" style={{ color: 'var(--abyss)', fontSize: '1.05rem' }}>{quotes[i].who}</div>
                <div className="mono-label" style={{ color: 'rgba(26,36,54,0.5)' }}>{quotes[i].role} · {quotes[i].yrs}</div>
              </div>
            </div>
          </div>

          <div>
            <span className="mono-label block mb-4" style={{ color: 'rgba(26,36,54,0.5)' }}>Switch voice</span>
            <div className="flex flex-col gap-2">
              {quotes.map((q, j) => (
                <button key={j} onClick={() => setI(j)}
                  className="text-left rounded-2xl p-4 transition-all border"
                  style={{
                    background: i === j ? 'var(--abyss)' : 'rgba(245,240,235,0.6)',
                    color: i === j ? 'var(--parchment)' : 'var(--abyss)',
                    borderColor: i === j ? 'var(--abyss)' : 'rgba(26,36,54,0.1)',
                  }}>
                  <div className="flex items-center justify-between gap-3">
                    <span className="font-display font-semibold" style={{ fontSize: '1rem' }}>{q.who}</span>
                    <span className="mono-label" style={{ color: i === j ? 'rgba(245,240,235,0.5)' : 'rgba(26,36,54,0.4)' }}>{String(j + 1).padStart(2, '0')}</span>
                  </div>
                  <div className="mono-label mt-1" style={{ color: i === j ? 'rgba(245,240,235,0.55)' : 'rgba(26,36,54,0.45)' }}>{q.role.split('·')[0].trim()}</div>
                </button>
              ))}
            </div>

            {/* Stats strip */}
            <div className="mt-10 grid grid-cols-3 gap-4 pt-8 border-t" style={{ borderColor: 'rgba(26,36,54,0.1)' }}>
              {[
                { v: '47', l: 'Sites shipped' },
                { v: '2018', l: 'Studio est.' },
                { v: '100%', l: 'Hand coded' },
              ].map(s => (
                <div key={s.l}>
                  <div className="font-display font-bold ticker-number" style={{ fontSize: '1.75rem', color: 'var(--abyss)', letterSpacing: '-0.02em' }}>{s.v}</div>
                  <span className="mono-label" style={{ color: 'rgba(26,36,54,0.45)' }}>{s.l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.RecordSection = RecordSection;

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: "Why is design free?", a: "It isn't. It's bundled into the monthly. We'd rather have a good relationship for years than a large invoice once. If you leave the monthly, you keep the site; we hand over the code." },
    { q: "What counts as 'local, established'?", a: "Usually: a business with at least a couple years of operating history, a real customer base, a real location or service area. We're not the right studio for pre-launch startups or one-week flash projects." },
    { q: "Do we own the site?", a: "Yes. Every line of code is yours. We host it on our infrastructure for convenience; at any time we can hand you a zip and point your DNS elsewhere." },
    { q: "What if we already have a site?", a: "We'll look at it honestly. Sometimes a tune-up is the right answer, not a rebuild. We'll tell you which before we quote." },
    { q: "How fast can you start?", a: "Usually four to six weeks out. We take a small number of projects each year so we can do them well. Two slots open for Q2 2026." },
    { q: "Can we cancel the monthly?", a: "Anytime, no penalty. You keep the site, we remove our monitoring. Most clients stay because it's cheaper than the time they'd spend maintaining it themselves." },
  ];
  return (
    <section id="faq" className="py-24 md:py-32" style={{ background: 'var(--parchment-dark)' }}>
      <div className="max-w-[1680px] mx-auto px-6 md:px-10 grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-12 lg:gap-20">
        <div>
          <div className="flex items-center gap-4 mb-6">
            <span className="h-px w-10" style={{ background: 'var(--summit)' }} />
            <span className="mono-label" style={{ color: 'rgba(26,36,54,0.55)' }}>Questions · first</span>
          </div>
          <h2 className="font-display font-extrabold mb-6" style={{ fontSize: 'clamp(2.5rem, 5vw, 4.5rem)', lineHeight: 1.04, letterSpacing: '-0.018em', color: 'var(--abyss)' }}>
            Reasonable <span className="italic font-normal" style={{ color: 'var(--summit)' }}>questions</span>.
          </h2>
          <p className="font-body max-w-[40ch]" style={{ fontSize: '1rem', lineHeight: 1.65, color: 'var(--ridge)' }}>
            The things people ask before they ask us anything else. If yours isn't here, just email. We answer the inbox.
          </p>
        </div>
        <div>
          {qs.map((q, i) => (
            <div key={i} className="faq-row" onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="flex items-start justify-between gap-8">
                <h3 className="font-display font-semibold" style={{ fontSize: 'clamp(1.1rem, 1.8vw, 1.35rem)', color: 'var(--abyss)', letterSpacing: '-0.012em' }}>{q.q}</h3>
                <span className="mono-label mt-1 shrink-0 transition-transform" style={{ color: 'var(--summit)', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</span>
              </div>
              <div className="overflow-hidden transition-[max-height,opacity,margin] duration-500" style={{ maxHeight: open === i ? 200 : 0, opacity: open === i ? 1 : 0, marginTop: open === i ? 10 : 0 }}>
                <p className="font-body max-w-[62ch]" style={{ fontSize: '0.98rem', lineHeight: 1.65, color: 'var(--ridge)' }}>{q.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FaqSection = FaqSection;

function CtaSection() {
  const [p, setP] = React.useState('Landing: $99/mo');
  const [email, setEmail] = React.useState('');
  return (
    <section id="contact" className="relative py-24 md:py-36 overflow-hidden abyss-band" data-nav-dark="true">
      <div className="bg-grid-dark" />
      <div className="noise" />

      {/* Background mountain silhouette with sunrise */}
      <svg className="absolute inset-0 w-full h-full" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" style={{ opacity: 0.85 }}>
        <defs>
          <radialGradient id="ctaSun" cx="0.75" cy="0.2" r="0.5">
            <stop offset="0" stopColor="#F2BBA0" stopOpacity="0.4" />
            <stop offset="1" stopColor="#F2BBA0" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="1600" height="900" fill="url(#ctaSun)" />
        <path d="M0 650 L180 480 L320 560 L480 380 L620 500 L780 340 L920 470 L1080 390 L1240 500 L1380 430 L1600 520 L1600 900 L0 900 Z" fill="#1F5E7A" opacity="0.35" />
        <path d="M0 750 L160 600 L300 680 L460 520 L600 620 L760 460 L900 580 L1060 500 L1220 620 L1360 540 L1600 620 L1600 900 L0 900 Z" fill="#0D3044" opacity="0.55" />
        <path d="M0 820 L140 720 L280 780 L420 660 L560 740 L720 600 L860 700 L1020 640 L1180 720 L1320 650 L1600 720 L1600 900 L0 900 Z" fill="#0E1520" />
      </svg>

      <div className="relative max-w-[1280px] mx-auto px-6 md:px-10">
        <div className="flex items-center gap-4 mb-6 justify-center">
          <span className="h-px w-10" style={{ background: 'var(--glacier)' }} />
          <span className="mono-label" style={{ color: 'rgba(245,240,235,0.65)' }}>Tell us what you're building</span>
          <span className="h-px w-10" style={{ background: 'var(--glacier)' }} />
        </div>
        <h2 className="font-display font-extrabold text-center mb-10" style={{ fontSize: 'clamp(3rem, 8vw, 7rem)', lineHeight: 1.0, letterSpacing: '-0.022em', color: 'var(--parchment)', textWrap: 'balance' }}>
          Let's start
          <br />
          a <span className="italic font-normal" style={{ color: 'var(--glacier)' }}>conversation</span>.
        </h2>
        <p className="font-body text-center max-w-[54ch] mx-auto mb-12" style={{ fontSize: '1.08rem', lineHeight: 1.6, color: 'rgba(245,240,235,0.72)' }}>
          No hard sell. A 30-minute call, on your time, to see if we're the right people to build the thing you need.
        </p>

        <form onSubmit={e => { e.preventDefault(); alert('Thanks, we\'ll be in touch within 48h.'); }}
          className="glass-dark rounded-3xl p-6 md:p-8 grid gap-5 max-w-[720px] mx-auto" style={{
            background: 'rgba(245,240,235,0.08)',
          }}>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            {['Landing: $99/mo', 'Business: $399/mo', 'Custom: quote'].map(opt => (
              <label key={opt} className="rounded-2xl p-4 cursor-pointer transition-all border" style={{
                background: p === opt ? 'var(--parchment)' : 'rgba(245,240,235,0.04)',
                borderColor: p === opt ? 'var(--parchment)' : 'rgba(245,240,235,0.15)',
                color: p === opt ? 'var(--abyss)' : 'var(--parchment)',
              }}>
                <input type="radio" name="product" value={opt} checked={p === opt} onChange={() => setP(opt)} className="sr-only" />
                <span className="mono-label block mb-1" style={{ color: p === opt ? 'rgba(26,36,54,0.45)' : 'rgba(245,240,235,0.5)' }}>{opt.split(':')[0].trim()}</span>
                <span className="font-display font-semibold" style={{ fontSize: '1rem' }}>{opt.split(':')[1]?.trim()}</span>
              </label>
            ))}
          </div>
          <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-3">
            <input type="email" required placeholder="you@yourbusiness.com" value={email} onChange={e => setEmail(e.target.value)}
              className="rounded-full px-6 py-4 font-display" style={{
                background: 'rgba(245,240,235,0.08)',
                border: '1px solid rgba(245,240,235,0.2)',
                color: 'var(--parchment)',
                fontSize: '1rem',
                outline: 'none',
              }} />
            <button type="submit" className="group inline-flex items-center gap-3 justify-center pl-2 pr-6 py-3 rounded-full font-display font-medium transition-colors"
              style={{ background: 'var(--parchment)', color: 'var(--abyss)', fontSize: '1rem' }}>
              <span className="w-10 h-10 rounded-full inline-flex items-center justify-center" style={{ background: 'var(--summit)', color: 'var(--parchment)' }}>
                <ArrowRightShort />
              </span>
              Start the conversation
            </button>
          </div>
          <div className="flex items-center justify-between pt-2">
            <span className="mono-label" style={{ color: 'rgba(245,240,235,0.5)' }}>We reply within 48 hours · Monday to Thursday</span>
            <span className="font-display italic font-light hidden md:inline" style={{ fontSize: '0.95rem', color: 'rgba(245,240,235,0.55)' }}>
              Or just email hello@alp·webstudio.com
            </span>
          </div>
        </form>
      </div>
    </section>
  );
}
window.CtaSection = CtaSection;

function Footer() {
  return (
    <footer className="relative py-14" style={{ background: 'var(--abyss-deep)', color: 'var(--parchment)' }}>
      <div className="max-w-[1680px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-1 md:grid-cols-[1.2fr_1fr_1fr_1fr] gap-10 pb-10 border-b" style={{ borderColor: 'rgba(245,240,235,0.08)' }}>
          <div>
            <a href="#hero" className="flex items-center gap-2.5">
              <MountainMark size={28} />
              <span className="font-display font-bold tracking-tight" style={{ fontSize: '1.05rem' }}>
                Alp<span style={{ color: 'var(--alpine-300)' }}>·</span>Web Studio
              </span>
            </a>
            <p className="font-display italic font-light mt-4 max-w-[32ch]" style={{ fontSize: '1rem', color: 'rgba(245,240,235,0.6)' }}>
              A small studio making the web a bit better, one local business at a time.
            </p>
          </div>
          {[
            { h: 'Products', l: ['Landing $99/mo', 'Business $399/mo', 'Custom quote'] },
            { h: 'Studio',   l: ['Record', 'Process', 'FAQ'] },
            { h: 'Contact',  l: ['hello@alp·webstudio.com', 'Alpine base · 47.5°N', '+1 (406) 555 · 0117'] },
          ].map(col => (
            <div key={col.h}>
              <span className="mono-label block mb-4" style={{ color: 'rgba(245,240,235,0.4)' }}>{col.h}</span>
              <ul className="space-y-2.5">
                {col.l.map(x => (
                  <li key={x}><a href="#" className="font-body link-u" style={{ fontSize: '0.95rem', color: 'rgba(245,240,235,0.82)' }}>{x}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <span className="mono-label" style={{ color: 'rgba(245,240,235,0.4)' }}>© 2026 Alp Web Studio · Est. 2018</span>
          <span className="mono-label" style={{ color: 'rgba(245,240,235,0.4)' }}>Hand coded · Carbon light · Slow on purpose</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;