// ===== Home page — Plasma v3 =====

function HeroHome() {
  return (
    <section style={{ padding: '40px 0 60px', position: 'relative' }}>
      <Aurora variant="hero" />
      <div className="bg-grid" />
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 28 }}>
          <span className="pill reveal r-1">
            <span className="dot" />
            Cape Town · working worldwide
          </span>
          <h1 className="reveal r-2 grad-text-soft" style={{ maxWidth: '15ch' }}>
            Less busywork. <span className="grad-text">More plain sailing.</span>
          </h1>
          <p className="lead reveal r-3" style={{ maxWidth: '64ch', textAlign: 'center' }}>
            The daily tasks that quietly eat your hours? We build custom web apps that turn them into a quick, simple flow — so your business runs smoother. And when you need a website to match, we build that too. Custom, from scratch, no agency price tag.
          </p>
          <div className="row reveal r-4" style={{ gap: 12 }}>
            <Link to="/contact" className="btn btn-grad btn-lg">Get a quote <span className="arr"><Icon.Arr /></span></Link>
            <Link to="/contact" className="btn btn-ghost btn-lg">Book a call</Link>
          </div>
          <div className="row reveal r-4" style={{ gap: 24, color: 'var(--text-muted)', fontSize: 13, marginTop: 4 }}>
            <span className="row"><Icon.Check style={{ color: 'var(--good)' }} /> Hours → minutes</span>
            <span className="row"><Icon.Check style={{ color: 'var(--good)' }} /> Built from scratch</span>
            <span className="row"><Icon.Check style={{ color: 'var(--good)' }} /> One point of contact</span>
          </div>
        </div>

        <div className="reveal r-4" style={{ marginTop: 72, position: 'relative' }}>
          <div style={{ position: 'absolute', inset: '-60px -40px 40px', pointerEvents: 'none' }}>
            <div className="aurora aurora-violet" style={{ width: 600, height: 400, top: -80, left: '10%', opacity: 0.25 }} />
            <div className="aurora aurora-cyan" style={{ width: 600, height: 400, top: 60, right: '5%', opacity: 0.2 }} />
          </div>
          <div style={{ position: 'relative' }}>
            <DashboardMock />
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== What we do · 01 — Web apps (the primary sell) =====
const APPS = [
  {
    key: 'life-os', name: 'Life OS', tagline: 'Your whole day, in one place.',
    fix: 'A personal command centre that pulls your tasks, calendar and habits together — plan the day, see what needs attention, and never lose the thread.',
    pain: 'tasks in one app, calendar in another, habits on a sticky note that\u2019s already lost.',
    tags: ['Task tracking', 'Calendar sync', 'Daily planner'], Demo: LifeOSDemo,
  },
  {
    key: 'stash', name: 'Stash', tagline: 'A messy file library, sorted in minutes.',
    fix: 'Point it at a folder, drop your loose files in, and it sorts the whole library into the right place for you.',
    pain: 'sorting hundreds of stray files by hand \u2014 an afternoon you never get back.',
    tags: ['File automation', 'Desktop app', 'Smart sorting'], Demo: StashDemo,
  },
  {
    key: 'waypoint', name: 'Waypoint', tagline: 'Every lead, from first hello to paid.',
    fix: 'Sign-ups from your website or socials land in the pipeline automatically. Drag each lead through the columns until the job is done and paid.',
    pain: 'a new enquiry arrives by email or Facebook and goes cold before anyone follows up.',
    tags: ['CRM pipeline', 'Lead capture', 'Drag & drop'], Demo: WaypointDemo,
  },
  {
    key: 'trifusion', name: 'Trifusion Portal', tagline: 'Clients and installers, minus the middle-man.',
    fix: 'Clients file a job ticket online and it lands straight with the installer. You just check that everything\u2019s on track.',
    pain: 'job details bouncing through calls and texts before they ever reach the installer.',
    tags: ['Client portal', 'Job tickets', 'Built for a client'], Demo: TrifusionDemo,
  },
];

function WebAppsShowcase() {
  const [active, setActive] = useState(0);
  const [playing, setPlaying] = useState(true);
  const app = APPS[active];

  useEffect(() => {
    if (!playing) return;
    const t = setTimeout(() => setActive(a => (a + 1) % APPS.length), 7200);
    return () => clearTimeout(t);
  }, [active, playing]);

  return (
    <section className="section" id="web-apps" style={{ position: 'relative' }}>
      <Aurora variant="minimal" />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="section-head">
          <span className="eyebrow">What we do · 01 — Web apps</span>
          <h2 className="grad-text-soft" style={{ maxWidth: '20ch' }}>
            The job that should take five minutes <span className="grad-text">but somehow takes an hour.</span>
          </h2>
          <p className="lead">
            That's what we go after. We build custom web apps that turn the slow, repetitive parts of your day into a quick, simple flow. These aren't mock-ups — they're real apps we've designed and shipped.
          </p>
        </div>

        <div className="app-showcase" onMouseEnter={() => setPlaying(false)} onMouseLeave={() => setPlaying(true)}>
          <div className="app-tabs">
            {APPS.map((a, i) => (
              <button
                key={a.key}
                className={'app-tab ' + (i === active ? 'on ' : '') + (i === active && playing ? 'playing' : '')}
                onClick={() => setActive(i)}
                aria-pressed={i === active}
              >
                <span className="ix">{'0' + (i + 1)}</span>
                <span style={{ flex: 1 }}>
                  <span className="nm">{a.name}</span>
                  <span className="tl">{a.tagline}</span>
                  {i === active && <span className="bar"><span className="barfill" /></span>}
                </span>
              </button>
            ))}
          </div>

          <div className="app-stage">
            <div className="app-shot" key={app.key}>
              {React.createElement(app.Demo)}
            </div>
            <div className="app-cap" key={app.key + '-cap'}>
              <p className="fix">{app.fix}</p>
              <div className="pain">
                <Icon.Bolt style={{ color: 'var(--violet)', marginTop: 1, flexShrink: 0, width: 15, height: 15 }} />
                <span><b style={{ color: 'var(--text-dim)', fontWeight: 600 }}>Before WebAnchor:</b> {app.pain}</span>
              </div>
              <div className="row" style={{ gap: 6, marginTop: 2 }}>
                {app.tags.map(t => <span key={t} className="tag">{t}</span>)}
              </div>
            </div>
          </div>
        </div>

        <p className="mono" style={{ fontSize: 12, color: 'var(--text-faint)', textAlign: 'center', marginTop: 40, letterSpacing: '0.04em' }}>
          Don't see your version of the hour-long job? <Link to="/contact" className="u-link" style={{ color: 'var(--violet)' }}>Tell us about it →</Link>
        </p>
      </div>
    </section>
  );
}

// ===== What we do · 02 — Websites (the companion offering) =====
function WebsitesStrip() {
  const points = [
    ['Custom design', 'Built around your brand, never pulled from a template.'],
    ['Mobile-first', 'Fast and sharp on every screen, every time.'],
    ['1–3 weeks', 'From kickoff to live — no month-long disappearing acts.'],
  ];
  return (
    <section className="section-sm" id="websites">
      <div className="wrap">
        <div className="card websites-band">
          <div className="websites-grid">
            <div className="col" style={{ gap: 16 }}>
              <span className="eyebrow">What we do · 02 — Websites</span>
              <h3 style={{ fontSize: 30, maxWidth: '16ch' }}>And the website? Same crew, same care.</h3>
              <p style={{ fontSize: 15, maxWidth: '52ch' }}>
                A web app and a website are cut from the same cloth — so we build those too. Fast, custom, and designed around what your business actually does. No templates, no agency price tag.
              </p>
              <div className="row" style={{ gap: 10, marginTop: 8 }}>
                <Link to="/pricing" className="btn btn-grad">See website packages <span className="arr"><Icon.Arr /></span></Link>
                <Link to="/portfolio" className="btn btn-ghost">Browse the work</Link>
              </div>
            </div>
            <div className="websites-points">
              {points.map(([t, d]) => (
                <div key={t} className="row" style={{ gap: 12, alignItems: 'flex-start' }}>
                  <span className="wp-check"><Icon.Check /></span>
                  <span>
                    <span style={{ display: 'block', fontWeight: 500, fontSize: 15 }}>{t}</span>
                    <span style={{ display: 'block', fontSize: 13.5, color: 'var(--text-muted)', marginTop: 2 }}>{d}</span>
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FeaturedWork() {
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="Featured work"
          title="A few sites we've shipped."
          sub="Every site below was custom-built from scratch. A wider selection lives on the portfolio page."
        />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 96 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, alignItems: 'center' }}>
            <div className="col" style={{ gap: 18 }}>
              <span className="eyebrow">Project · 01 · Specialty coffee</span>
              <h3>Brewline Coffee — a modern site for a Cape Town roaster.</h3>
              <p style={{ fontSize: 15 }}>Multi-page build with menu, story, and a wholesale enquiry form. Clean, fast, and tuned to the brand.</p>
              <div className="row" style={{ gap: 6 }}>
                <span className="tag">Multi-page</span>
                <span className="tag">Mobile-first</span>
                <span className="tag">Custom design</span>
              </div>
              <Link to="/portfolio" className="u-link" style={{ color: 'var(--violet)', fontSize: 14 }}>View live <Icon.Arr /></Link>
            </div>
            <MarketingMock />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center' }}>
            <AnalyticsMock />
            <div className="col" style={{ gap: 18 }}>
              <span className="eyebrow">Project · 02 · Trades</span>
              <h3>Cape Plumbing Co. — a trust-first site for a local plumbing business.</h3>
              <p style={{ fontSize: 15 }}>Service pages, area coverage, and a quick-quote contact form that drops leads straight into the inbox.</p>
              <div className="row" style={{ gap: 6 }}>
                <span className="tag">Lead capture</span>
                <span className="tag">WhatsApp</span>
                <span className="tag">SEO-ready</span>
              </div>
              <Link to="/portfolio" className="u-link" style={{ color: 'var(--violet)', fontSize: 14 }}>View live <Icon.Arr /></Link>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, alignItems: 'center' }}>
            <div className="col" style={{ gap: 18 }}>
              <span className="eyebrow">Project · 03 · Photography</span>
              <h3>Mara Photography — minimalist portfolio for a wedding & lifestyle photographer.</h3>
              <p style={{ fontSize: 15 }}>Lightning-fast galleries, a booking enquiry page, and a layout that gets out of the photographs' way.</p>
              <div className="row" style={{ gap: 6 }}>
                <span className="tag">Galleries</span>
                <span className="tag">Booking form</span>
                <span className="tag">Editorial</span>
              </div>
              <Link to="/portfolio" className="u-link" style={{ color: 'var(--violet)', fontSize: 14 }}>View live <Icon.Arr /></Link>
            </div>
            <WebAppMock />
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Get in touch', dur: 'Day 1', d: 'Book a call or send us a quote request. We reply within a working day with a real answer.' },
    { n: '02', t: 'We design', dur: 'Days 2–7', d: 'You get a draft within days, not months. Built around your brand, not pulled from a template.' },
    { n: '03', t: 'You review', dur: 'Days 7–14', d: 'Feedback rounds included on every package. We iterate until it feels right.' },
    { n: '04', t: 'You launch', dur: 'Week 1–3', d: "We hand it over — or keep it running on a monthly care plan. Your call." },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="How it works"
          title="Four steps, no surprises."
          sub="Straightforward process, fast turnaround, and you talk to the person actually building your site."
        />
        <div className="grid grid-4">
          {steps.map(s => (
            <div key={s.n} className="card" style={{ padding: 28 }}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <div className="step-num">{s.n}</div>
                <span className="tag">{s.dur}</span>
              </div>
              <h4 style={{ fontSize: 19, marginTop: 16 }}>{s.t}</h4>
              <p style={{ fontSize: 14, marginTop: 10 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  const items = [
    { t: 'Worldwide, but personal.', d: 'Based in Cape Town, working with clients across the globe. You get the time-zone flexibility of a remote studio without the agency layer.' },
    { t: 'Built from scratch.', d: 'No bloated templates, no recycled themes. Every site is custom-designed around your brand and what your business actually does.' },
    { t: 'Fast turnaround.', d: "Most sites delivered in 1–3 weeks. We work in short cycles, you see progress every few days, and we don't disappear for a month." },
    { t: 'One point of contact.', d: "You talk to the person actually building your site. No account managers in between, no game of telephone." },
    { t: 'Honesty over hype.', d: "We'll tell you what you need, not what gets us a bigger invoice. If a smaller package is right, we'll say so." },
    { t: 'Yours to keep.', d: 'Once the final invoice is paid, the site is yours — code, design, everything. You can host it with us or take it wherever you like.' },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 60, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 120, display: 'flex', flexDirection: 'column', gap: 18 }}>
            <span className="eyebrow">Why WebAnchor</span>
            <h2 className="grad-text-soft">A small studio that knows what it's doing.</h2>
            <p style={{ fontSize: 15 }}>We're not an agency trying to sound impressive. We're a small studio that takes the time to understand what your business actually does before we touch a pixel.</p>
            <Link to="/about" className="btn btn-ghost" style={{ width: 'fit-content', marginTop: 8 }}>More about us <Icon.Arr /></Link>
          </div>
          <div className="grid grid-2">
            {items.map(it => (
              <div key={it.t} className="tile">
                <Icon.Check style={{ color: 'var(--cyan)' }} />
                <h4 style={{ marginTop: 14, fontSize: 18 }}>{it.t}</h4>
                <p style={{ fontSize: 14, marginTop: 10 }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PricingPreview() {
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="Pricing"
          title="Straightforward pricing. All in Rand."
          sub="No retainers required, no surprise fees. Three website packages, plus custom quotes for web apps."
        />
        <div className="grid grid-3">
          <div className="card price-card">
            <div>
              <div className="name">Starter</div>
              <div className="text-muted" style={{ fontSize: 13, marginTop: 4 }}>For sole traders, freelancers, and brand-new businesses.</div>
            </div>
            <div className="amount">
              <span className="num">R8,500</span><span className="suffix">once-off</span>
            </div>
            <ul>
              {['2 pages (Home + Contact)', 'Custom design, mobile-responsive', 'Contact form', '2 rounds of revisions', '1 week turnaround'].map(l => (
                <li key={l}><Icon.Check /> {l}</li>
              ))}
            </ul>
            <Link to="/pricing" className="btn btn-ghost">View details</Link>
          </div>

          <div className="card featured price-card" style={{ position: 'relative' }}>
            <div className="pill" style={{ position: 'absolute', top: 18, right: 18, background: 'rgba(200,166,255,0.15)', borderColor: 'rgba(200,166,255,0.4)' }}>
              <span className="dot" /> Most popular
            </div>
            <div>
              <div className="name">Professional</div>
              <div className="text-muted" style={{ fontSize: 13, marginTop: 4 }}>For small businesses ready to look the part.</div>
            </div>
            <div className="amount">
              <span className="num grad-text">R14,500</span><span className="suffix">once-off</span>
            </div>
            <ul>
              {['4–5 pages (Home, Services, About, Work, Contact)', 'Custom design, mobile-responsive', 'Contact form + WhatsApp integration', 'Basic on-page optimization', '3 rounds of revisions', '2 weeks turnaround'].map(l => (
                <li key={l}><Icon.Check /> {l}</li>
              ))}
            </ul>
            <Link to="/pricing" className="btn btn-grad">View details <Icon.Arr /></Link>
          </div>

          <div className="card price-card">
            <div>
              <div className="name">Enterprise</div>
              <div className="text-muted" style={{ fontSize: 13, marginTop: 4 }}>For established businesses that need everything dialled in.</div>
            </div>
            <div className="amount">
              <span className="from">from</span><span className="num">R19,500</span><span className="suffix">once-off</span>
            </div>
            <ul>
              {['Unlimited pages (within reason)', 'Fully custom design and animations', 'Advanced forms, integrations, bookings', 'Content upload included', '5 rounds of revisions, 3-week build', '1 month of post-launch support'].map(l => (
                <li key={l}><Icon.Check /> {l}</li>
              ))}
            </ul>
            <Link to="/pricing" className="btn btn-ghost">View details</Link>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeFAQ() {
  const items = [
    { q: 'How long does a website take to build?', a: 'Starter sites take about a week. Professional sites take around two weeks. Enterprise builds take roughly three weeks. We confirm the timeline before we start.' },
    { q: 'What do you need from me to get started?', a: "Your business name, what you do, who your customers are, and any content you already have (text, photos, logos). If you don't have those, our add-on services can help — copywriting, branding, the works." },
    { q: 'Do you build online stores with payment integration?', a: "Not at the moment. We can build catalogue-style stores where customers browse products and contact you to order, but we don't do checkout or payment processing yet." },
    { q: "Do I own the website once it's built?", a: 'Yes. Once the final invoice is paid, the site is yours — code, design, everything.' },
    { q: 'Do you work with international clients?', a: "Yes. We're in Cape Town but we've built sites for clients across multiple time zones. We're flexible on meeting times." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="wrap-tight">
        <SectionHead eyebrow="FAQ" title="Common questions, answered." center />
        <div>
          {items.map((it, i) => (
            <div key={i} className={'acc-item ' + (open === i ? 'open' : '')}>
              <button className="acc-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus"><Icon.Plus /></span>
              </button>
              <div className="acc-a"><p style={{ maxWidth: '70ch', paddingRight: 40 }}>{it.a}</p></div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Link to="/faq" className="btn btn-ghost">See all questions <Icon.Arr /></Link>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <Page>
      <HeroHome />
      <WebAppsShowcase />
      <WebsitesStrip />
      <FeaturedWork />
      <HowItWorks />
      <Benefits />
      <PricingPreview />
      <HomeFAQ />
      <CtaTail />
    </Page>
  );
}

Object.assign(window, { HomePage });