/* global React, useReveal, Btn, CornerTicks, Eyebrow, StationRow, STATIONS, SignalLine, SchematicGlyph, DeviceMatrix, GetTheApp */
const { useState: useStateP, useMemo: useMemoP } = React;

/* ============ PAGE HEADER ============ */
function PageHead({ code, kicker, title, sub }) {
  return (
    <section className="section-tight blueprint" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div className="reveal"><Eyebrow code={code}>{kicker}</Eyebrow></div>
        <h1 className="reveal" style={{ '--rd': '60ms', marginTop: 20, maxWidth: '20ch',
            fontFamily: 'var(--font-head)', fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.05,
            fontSize: 'clamp(2.2rem,5.2vw,4rem)' }}>{title}</h1>
        {sub && <p className="lead reveal" style={{ '--rd': '120ms', marginTop: 22, maxWidth: 600 }}>{sub}</p>}
      </div>
    </section>
  );
}

/* slim CTA reused on inner pages */
function CTASlim({ go }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
             gap: 24, flexWrap: 'wrap', border: '1px solid var(--line)', borderRadius: 4, padding: 'clamp(28px,4vw,48px)',
             background: 'var(--bg-2)' }}>
          <div>
            <h2 className="h-lg" style={{ maxWidth: '18ch' }}>See the whole flow on your own operation.</h2>
          </div>
          <Btn primary arrow href="#demo" onClick={e => { e.preventDefault(); go('demo'); }}>Request demo</Btn>
        </div>
      </div>
    </section>
  );
}

/* ============ PLATFORM PAGE — the flow, in depth ============ */
function PlatformPage({ go }) {
  const ref = useReveal();
  return (
    <main ref={ref}>
      <PageHead code="P" kicker="The platform / trace the flow"
        title="One flow. Six stations. Every step connected."
        sub="Follow a single maintenance need from the moment it's spotted to the moment it's invoiced — and see what Xaint automates between every step." />

      <section className="section-tight" style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="wrap reveal"><SignalLine run /></div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          {STATIONS.map((s, i) => <StationRow key={s.code} s={s} i={i} />)}
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="reveal" style={{ marginBottom: 'clamp(28px,4vw,48px)', maxWidth: 680 }}>
            <Eyebrow code="P7">Connections</Eyebrow>
            <h2 className="h-xl" style={{ marginTop: 18 }}>The flow meets your floor where it already runs.</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              Xaint is built to sit on top of the systems and signals you already have, working
              alongside them from day one.
            </p>
          </div>
          <div className="int-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1,
               background: 'var(--line)', border: '1px solid var(--line)' }}>
            {['Asset registers', 'Meter & IoT feeds', 'Technical docs / PDFs', 'Accounting & invoicing',
              'Mobile field client', 'Customer records', 'CSV / API import', 'SSO / access control'].map((p, i) => (
              <div key={p} className="int-cell" style={{ background: 'var(--surface)', padding: 'clamp(20px,3vw,30px)',
                   minHeight: 116, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                   transition: 'background .2s' }}
                   onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-2)'}
                   onMouseLeave={e => e.currentTarget.style.background = 'var(--surface)'}>
                <span className="mono tabnum" style={{ fontSize: '0.6rem', color: 'var(--ink-3)' }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontSize: '0.98rem', fontWeight: 600, letterSpacing: '-0.01em' }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <DeviceMatrix />
      <GetTheApp />

      <CTASlim go={go} />
    </main>
  );
}

/* ============ COLLABORATION PAGE ============ */
const ROLES = [
  { code: '01', role: 'Operators', who: 'On the floor',
    body: 'Capture a maintenance need in seconds and follow its progress through the flow — every update visible at a glance, so the floor always knows where a need stands.',
    glyph: '01' },
  { code: '02', role: 'Technicians', who: 'On the tools',
    body: 'Pick up a task that already carries the procedure, the part number, and the asset history. Notes and photos travel with the job and stay with the asset for next time.',
    glyph: '02' },
  { code: '03', role: 'Customers', who: 'On the other side',
    body: 'See status, approve an estimate, and receive the invoice on the same thread the work happened on. The commercial side stops being a separate phone call.',
    glyph: '06' },
];
const COLLAB_FEATURES = [
  ['Shared context', 'Every task carries its full history — who raised it, what was tried, what it cost — so nobody re-asks.'],
  ['Threaded notes', 'Comments and photos attach to the task itself, visible to everyone with a reason to see them.'],
  ['Customer approvals', 'Estimates go out and come back approved right in the flow.'],
  ['Role-based visibility', 'Operators, technicians, managers and customers each see exactly the view that’s theirs.'],
];

function CollaborationPage({ go }) {
  const ref = useReveal();
  return (
    <main ref={ref}>
      <PageHead code="C" kicker="Collaboration / one flow, every hand"
        title="Everyone who touches the asset, in the same flow."
        sub="Maintenance breaks when context lives in five places. Xaint keeps operators, technicians, managers and customers on one shared thread — from the maintenance need to the paid invoice." />

      <section className="section">
        <div className="wrap">
          <div className="claim-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
            {ROLES.map((r, i) => (
              <article key={r.code} className="claim reveal" style={{ '--rd': `${i * 90}ms`, display: 'flex', flexDirection: 'column' }}>
                <CornerTicks color="var(--accent)" />
                <div className="st-visual blueprint" style={{ aspectRatio: '16 / 9', marginBottom: 22 }}>
                  <CornerTicks color="var(--line-2)" />
                  <SchematicGlyph code={r.glyph} />
                </div>
                <div className="big">{r.who}</div>
                <h3 style={{ marginTop: 12 }}>{r.role}</h3>
                <p>{r.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)', borderBlock: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="reveal" style={{ maxWidth: 680, marginBottom: 'clamp(28px,4vw,48px)' }}>
            <Eyebrow code="C2">How the thread holds</Eyebrow>
            <h2 className="h-xl" style={{ marginTop: 18 }}>One source of truth for every hand.</h2>
          </div>
          <div className="int-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 1,
               background: 'var(--line)', border: '1px solid var(--line)' }}>
            {COLLAB_FEATURES.map(([h, p], i) => (
              <div key={h} className="reveal" style={{ background: 'var(--surface)', padding: 'clamp(24px,3vw,34px)', '--rd': `${i % 2 * 70}ms` }}>
                <div style={{ display: 'flex', gap: 14 }}>
                  <span className="mono tag-accent" style={{ fontSize: '0.78rem', marginTop: 3 }}>{String(i + 1).padStart(2, '0')}</span>
                  <div>
                    <h3 className="h-md">{h}</h3>
                    <p style={{ color: 'var(--ink-2)', fontSize: '0.96rem', marginTop: 8, lineHeight: 1.6 }}>{p}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASlim go={go} />
    </main>
  );
}

/* ============ ABOUT PAGE ============ */
const PRINCIPLES = [
  ['Outcomes over features', 'We measure ourselves in needs resolved and invoices sent — the outcomes that move your operation forward.'],
  ['One connected flow', 'Maintenance stays whole across every hand-off — one flow, one memory, from the first signal to the settled invoice.'],
  ['Built with operators', 'Every station is shaped alongside the people who capture maintenance needs and turn the wrenches every day.'],
];

function AboutPage({ go }) {
  const ref = useReveal();
  return (
    <main ref={ref}>
      <PageHead code="A" kicker="About / know first"
        title="Maintenance should tell you first."
        sub="Xaint started from a simple frustration: the people who keep equipment running are the last to know what it needs. We're building the flow that closes that gap." />

      <section className="section">
        <div className="wrap" style={{ maxWidth: 760 }}>
          <p className="lead reveal" style={{ fontSize: 'clamp(1.2rem,2vw,1.6rem)', lineHeight: 1.45 }}>
            Every maintenance need deserves to be seen the moment it happens, every work order to keep moving, and
            every finished job to be billed. <span style={{ color: 'var(--accent)' }}>Know first</span> is
            our reason for existing — surface what an asset needs ahead of a breakdown, and
            carry that knowledge all the way to the invoice.
          </p>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)', borderBlock: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="reveal" style={{ marginBottom: 'clamp(28px,4vw,48px)' }}>
            <Eyebrow code="A2">What we hold to</Eyebrow>
            <h2 className="h-xl" style={{ marginTop: 18, maxWidth: '16ch' }}>Three principles we build by.</h2>
          </div>
          <div className="claim-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
            {PRINCIPLES.map(([h, p], i) => (
              <article key={h} className="claim reveal" style={{ '--rd': `${i * 90}ms` }}>
                <CornerTicks color="var(--accent)" />
                <span className="watermark mono">{String(i + 1).padStart(2, '0')}</span>
                <h3>{h}</h3>
                <p>{p}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* The name — brand detail */}
      <section className="section">
        <div className="wrap">
          <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,64px)',
               alignItems: 'center' }} >
            <div>
              <Eyebrow code="A3">The name</Eyebrow>
              <h2 className="h-lg" style={{ marginTop: 18 }}>The intelligence is in the name — quietly.</h2>
              <p className="lead" style={{ marginTop: 16, fontSize: '1.05rem' }}>
                Look at the wordmark: the <span style={{ color: 'var(--accent)', fontWeight: 600 }}>A</span> and
                the <span style={{ color: 'var(--accent)', fontWeight: 600 }}>I</span> carry the gold. The intelligence
                runs through everything Xaint does — working quietly in the background while we lead with the outcomes it delivers.
              </p>
            </div>
            <div style={{ display: 'grid', placeItems: 'center', padding: 'clamp(28px,4vw,56px)',
                 border: '1px solid var(--line)', borderRadius: 4, background: 'var(--bg-2)' }}>
              <svg viewBox="0 0 366 88" width="240" role="img" aria-label="Xaint">
                <g stroke="var(--ink)" strokeWidth="9" strokeLinecap="square" fill="none">
                  <line x1="8" y1="14" x2="62" y2="74" /><line x1="62" y1="14" x2="8" y2="74" />
                  <line x1="208" y1="74" x2="208" y2="14" /><line x1="208" y1="14" x2="270" y2="74" /><line x1="270" y1="74" x2="270" y2="14" />
                  <line x1="296" y1="14" x2="358" y2="14" /><line x1="327" y1="14" x2="327" y2="74" />
                </g>
                <g stroke="var(--accent)" strokeWidth="9" strokeLinecap="square" fill="none">
                  <line x1="92" y1="74" x2="123" y2="14" /><line x1="123" y1="14" x2="154" y2="74" />
                  <line x1="180" y1="14" x2="180" y2="74" />
                </g>
              </svg>
            </div>
          </div>
        </div>
      </section>

      <CTASlim go={go} />
    </main>
  );
}

/* ============ DEMO PAGE — calendar scheduler ============ */
/* 30-min slots in GST (UTC+4), chosen to overlap Middle East and Asia-Pacific working hours. */
const SLOT_TZ = 'Times in GST (UTC+4) — chosen to suit Middle East & Asia-Pacific. We’ll confirm your local time.';
const SLOTS = [
  { t: '07:00', r: 'APAC AM · Gulf' },
  { t: '08:30', r: 'India · Gulf' },
  { t: '10:00', r: 'Gulf · SE Asia' },
  { t: '11:30', r: 'India PM · APAC' },
  { t: '13:00', r: 'Gulf · APAC PM' },
  { t: '14:30', r: 'APAC eve · Gulf' },
];
const DOW = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

function startOfMonth(y, m) { return new Date(y, m, 1); }
function fmtDate(d) {
  return `${DOW[(d.getDay() + 6) % 7]}, ${MONTHS[d.getMonth()].slice(0,3)} ${d.getDate()}`;
}

function Calendar({ selected, onSelect }) {
  const today = useMemoP(() => { const t = new Date(); t.setHours(0,0,0,0); return t; }, []);
  const [view, setView] = useStateP(() => ({ y: today.getFullYear(), m: today.getMonth() }));

  const first = startOfMonth(view.y, view.m);
  const lead = (first.getDay() + 6) % 7; /* Mon-first offset */
  const daysIn = new Date(view.y, view.m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < lead; i++) cells.push(null);
  for (let d = 1; d <= daysIn; d++) cells.push(new Date(view.y, view.m, d));

  const canPrev = !(view.y === today.getFullYear() && view.m === today.getMonth());
  const shift = (delta) => {
    let m = view.m + delta, y = view.y;
    if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; }
    setView({ y, m });
  };

  const navBtn = (dir, on, label) => (
    <button aria-label={label} disabled={!on} onClick={() => shift(dir)}
      style={{ width: 34, height: 34, borderRadius: 2, cursor: on ? 'pointer' : 'not-allowed',
        background: 'transparent', border: '1px solid var(--line-2)', color: on ? 'var(--ink)' : 'var(--ink-3)',
        opacity: on ? 1 : 0.4, fontFamily: 'var(--font-mono)', fontSize: '0.9rem' }}>
      {dir < 0 ? '‹' : '›'}
    </button>
  );

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span className="mono" style={{ fontSize: '0.92rem', fontWeight: 500, letterSpacing: '0.02em' }}>
          {MONTHS[view.m]} {view.y}
        </span>
        <div style={{ display: 'flex', gap: 8 }}>{navBtn(-1, canPrev, 'Previous month')}{navBtn(1, true, 'Next month')}</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4 }}>
        {DOW.map(d => (
          <span key={d} className="mono" style={{ textAlign: 'center', fontSize: '0.6rem', color: 'var(--ink-3)',
            letterSpacing: '0.08em', paddingBottom: 6 }}>{d}</span>
        ))}
        {cells.map((d, i) => {
          if (!d) return <span key={'e' + i} />;
          const isPast = d < today;
          const wknd = d.getDay() === 0 || d.getDay() === 6;
          const disabled = isPast || wknd;
          const isToday = d.getTime() === today.getTime();
          const sel = selected && d.getTime() === selected.getTime();
          return (
            <button key={d.getTime()} disabled={disabled} onClick={() => onSelect(d)}
              style={{ aspectRatio: '1', borderRadius: 2, cursor: disabled ? 'not-allowed' : 'pointer',
                fontFamily: 'var(--font-mono)', fontSize: '0.85rem',
                border: sel ? '1px solid var(--accent-fill)' : isToday ? '1px solid var(--line-2)' : '1px solid transparent',
                background: sel ? 'var(--accent-fill)' : 'transparent',
                color: sel ? 'var(--accent-ink)' : disabled ? 'var(--ink-3)' : 'var(--ink)',
                opacity: disabled ? 0.32 : 1, transition: 'background .15s, border-color .15s' }}
              onMouseEnter={e => { if (!disabled && !sel) e.currentTarget.style.background = 'var(--bg-2)'; }}
              onMouseLeave={e => { if (!disabled && !sel) e.currentTarget.style.background = 'transparent'; }}>
              {d.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function DemoPage({ go }) {
  const ref = useReveal();
  const [date, setDate] = useStateP(null);
  const [slot, setSlot] = useStateP(null);
  const [form, setForm] = useStateP({ name: '', email: '', org: '' });
  const [sent, setSent] = useStateP(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const ready = date && slot && form.name && form.email;
  const submit = (e) => { e.preventDefault(); if (ready) setSent(true); };

  const field = { width: '100%', background: 'var(--bg)', border: '1px solid var(--line)',
    borderRadius: 2, padding: '12px 14px', color: 'var(--ink)', fontFamily: 'var(--font-body)',
    fontSize: '0.95rem', outline: 'none' };
  const lbl = { display: 'block', marginBottom: 8 };

  return (
    <main ref={ref}>
      <PageHead code="D" kicker="Demo / see it in your flow"
        title="Request a demo."
        sub="Pick a time that works across your region. We'll walk the whole flow through your real scenarios — capture to invoice — and answer anything about fit, rollout, and pricing." />

      <section className="section">
        <div className="wrap">
          <div className="contact-split" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'clamp(32px,6vw,64px)', alignItems: 'start' }}>
            {/* what to expect */}
            <div className="reveal">
              <Eyebrow code="D1">What to expect</Eyebrow>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 1, marginTop: 22,
                   background: 'var(--line)', border: '1px solid var(--line)' }}>
                {[
                  ['A live walk of the flow', '30 minutes, capture through invoice, walked live on the product.'],
                  ['Your scenarios, your data', 'Bring a real asset and a recent maintenance need — we’ll run it through Xaint together.'],
                  ['A clear view of fit', 'A candid look at fit, rollout effort, and cost, tailored to your operation.'],
                ].map(([h, p], i) => (
                  <div key={i} style={{ background: 'var(--surface)', padding: '20px' }}>
                    <div style={{ display: 'flex', gap: 12 }}>
                      <span className="mono tag-accent" style={{ fontSize: '0.72rem', marginTop: 2 }}>{String(i + 1).padStart(2, '0')}</span>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: '0.98rem' }}>{h}</div>
                        <div style={{ fontSize: '0.86rem', color: 'var(--ink-3)', marginTop: 5, lineHeight: 1.5 }}>{p}</div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="card" style={{ marginTop: 18, padding: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
                <span className="dot" />
                <span className="mono" style={{ fontSize: '0.7rem', color: 'var(--ink-2)', letterSpacing: '0.08em' }}>
                  HOSTED BY THE TEAM THAT BUILDS XAINT
                </span>
              </div>
            </div>

            {/* scheduler */}
            <div className="reveal" style={{ '--rd': '100ms' }}>
              <div className="card" style={{ padding: 'clamp(24px,3.5vw,38px)', position: 'relative' }}>
                <CornerTicks color="var(--accent)" />
                {!sent ? (
                  <form onSubmit={submit}>
                    <div className="tag" style={{ marginBottom: 22 }}>PICK A DATE</div>
                    <Calendar selected={date} onSelect={(d) => { setDate(d); setSlot(null); }} />

                    <div className="tag" style={{ margin: '28px 0 14px' }}>
                      PICK A TIME {date && <span className="tag-accent">· {fmtDate(date)}</span>}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                      {SLOTS.map(s => {
                        const on = slot === s;
                        return (
                          <button type="button" key={s.t} disabled={!date} onClick={() => setSlot(s)}
                            style={{ flex: '1 0 auto', minWidth: 102, padding: '9px 12px', borderRadius: 2,
                              cursor: date ? 'pointer' : 'not-allowed', fontFamily: 'var(--font-mono)',
                              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, lineHeight: 1.1,
                              border: on ? '1px solid var(--accent-fill)' : '1px solid var(--line-2)',
                              background: on ? 'var(--accent-fill)' : 'transparent',
                              color: on ? 'var(--accent-ink)' : date ? 'var(--ink)' : 'var(--ink-3)',
                              opacity: date ? 1 : 0.4, transition: 'background .15s, border-color .15s' }}>
                            <span style={{ fontSize: '0.86rem', fontWeight: 500 }}>{s.t}</span>
                            <span style={{ fontSize: '0.56rem', letterSpacing: '0.06em',
                              opacity: on ? 0.78 : 0.6 }}>{s.r}</span>
                          </button>
                        );
                      })}
                    </div>
                    <p className="mono" style={{ fontSize: '0.62rem', color: 'var(--ink-3)', letterSpacing: '0.04em',
                      marginTop: 12, lineHeight: 1.5 }}>{SLOT_TZ}</p>

                    <div style={{ height: 1, background: 'var(--line)', margin: '26px 0' }} />

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                      <div><label className="tag" style={lbl}>NAME</label>
                        <input style={field} required value={form.name} onChange={set('name')} placeholder="Jane Operator" /></div>
                      <div><label className="tag" style={lbl}>WORK EMAIL</label>
                        <input style={field} type="email" required value={form.email} onChange={set('email')} placeholder="jane@operation.com" /></div>
                    </div>
                    <div style={{ marginTop: 16 }}>
                      <label className="tag" style={lbl}>ORGANIZATION</label>
                      <input style={field} value={form.org} onChange={set('org')} placeholder="Company / facility" /></div>

                    <button type="submit" disabled={!ready} className="btn btn-primary"
                      style={{ marginTop: 24, width: '100%', justifyContent: 'center',
                        opacity: ready ? 1 : 0.45, cursor: ready ? 'pointer' : 'not-allowed' }}>
                      Request demo <span className="arr">→</span>
                    </button>
                    <p className="mono" style={{ fontSize: '0.64rem', color: 'var(--ink-3)', letterSpacing: '0.06em', marginTop: 14, textAlign: 'center' }}>
                      A SPECIALIST ON THE CALL · WE'LL CONFIRM YOUR LOCAL TIME
                    </p>
                  </form>
                ) : (
                  <div style={{ textAlign: 'center', padding: '36px 0' }}>
                    <div className="dot" style={{ margin: '0 auto 22px', width: 12, height: 12 }} />
                    <h3 className="h-md">Demo requested</h3>
                    <p className="lead" style={{ marginTop: 14, fontSize: '1rem', maxWidth: '36ch', marginInline: 'auto' }}>
                      We've received your request for <span style={{ color: 'var(--accent)' }}>{fmtDate(date)} at {slot && slot.t} GST</span>.
                      A Xaint specialist will confirm by email to {form.email || 'your inbox'} and align to your local time.
                    </p>
                    <div className="mono" style={{ marginTop: 22, fontSize: '0.7rem', color: 'var(--ink-3)', letterSpacing: '0.12em' }}>
                      REF · XNT-{Math.random().toString(36).slice(2, 8).toUpperCase()}
                    </div>
                    <button className="btn" style={{ marginTop: 26 }} onClick={() => { setSent(false); setDate(null); setSlot(null); }}>Request another</button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ CONTACT PAGE ============ */
function ContactPage({ go }) {
  const ref = useReveal();
  const [sent, setSent] = useStateP(false);
  const [form, setForm] = useStateP({ name: '', email: '', msg: '' });
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    const subject = `Xaint enquiry — ${form.name || 'Website'}`;
    const body = `Name: ${form.name}\nEmail: ${form.email}\n\n${form.msg}`;
    window.location.href = `mailto:info@xaint.io?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };

  const field = { width: '100%', background: 'var(--bg)', border: '1px solid var(--line)',
    borderRadius: 2, padding: '12px 14px', color: 'var(--ink)', fontFamily: 'var(--font-body)',
    fontSize: '0.95rem', outline: 'none' };
  const lbl = { display: 'block', marginBottom: 8 };

  return (
    <main ref={ref}>
      <PageHead code="K" kicker="Contact / open a channel"
        title="Talk to us."
        sub="Questions about Xaint, partnerships, or support — reach the team directly. We reply to every message." />

      <section className="section">
        <div className="wrap">
          <div className="contact-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 'clamp(32px,6vw,72px)', alignItems: 'start' }}>
            <div className="reveal">
              <Eyebrow code="K1">Direct channels</Eyebrow>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 1, marginTop: 22,
                   background: 'var(--line)', border: '1px solid var(--line)' }}>
                {[['GENERAL', 'info@xaint.io', 'Anything and everything'],
                  ['SALES', 'sales@xaint.io', 'Fit, rollout & pricing'],
                  ['SUPPORT', 'support@xaint.io', 'For teams already up and running']].map(([k, v, d], i) => (
                  <a key={i} href={`mailto:${v}`} style={{ background: 'var(--surface)', padding: '22px 20px',
                       display: 'block', transition: 'background .2s' }}
                       onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-2)'}
                       onMouseLeave={e => e.currentTarget.style.background = 'var(--surface)'}>
                    <div className="tag tag-accent" style={{ marginBottom: 8 }}>{k}</div>
                    <div className="mono" style={{ fontSize: '1rem', fontWeight: 600 }}>{v}</div>
                    <div style={{ fontSize: '0.84rem', color: 'var(--ink-3)', marginTop: 5 }}>{d}</div>
                  </a>
                ))}
              </div>
              <div className="card" style={{ marginTop: 18, padding: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
                <span className="dot" />
                <span className="mono" style={{ fontSize: '0.7rem', color: 'var(--ink-2)', letterSpacing: '0.08em' }}>
                  TYPICAL REPLY WITHIN ONE BUSINESS DAY
                </span>
              </div>
            </div>

            <div className="reveal" style={{ '--rd': '100ms' }}>
              <div className="card" style={{ padding: 'clamp(26px,3.5vw,42px)', position: 'relative' }}>
                <CornerTicks color="var(--accent)" />
                {!sent ? (
                  <form onSubmit={submit}>
                    <div className="tag" style={{ marginBottom: 24 }}>SEND A MESSAGE</div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                      <div><label className="tag" style={lbl}>NAME</label>
                        <input style={field} required value={form.name} onChange={set('name')} placeholder="Jane Operator" /></div>
                      <div><label className="tag" style={lbl}>EMAIL</label>
                        <input style={field} type="email" required value={form.email} onChange={set('email')} placeholder="jane@operation.com" /></div>
                    </div>
                    <div style={{ marginTop: 18 }}>
                      <label className="tag" style={lbl}>MESSAGE</label>
                      <textarea style={{ ...field, minHeight: 140, resize: 'vertical' }} required value={form.msg} onChange={set('msg')}
                        placeholder="How can we help?" /></div>
                    <button type="submit" className="btn btn-primary" style={{ marginTop: 24, width: '100%', justifyContent: 'center' }}>
                      Send message <span className="arr">→</span>
                    </button>
                  </form>
                ) : (
                  <div style={{ textAlign: 'center', padding: '44px 0' }}>
                    <div className="dot" style={{ margin: '0 auto 22px', width: 12, height: 12 }} />
                    <h3 className="h-md">Message sent</h3>
                    <p className="lead" style={{ marginTop: 14, fontSize: '1rem' }}>
                      Thanks — we'll be in touch within one business day.
                    </p>
                    <button className="btn" style={{ marginTop: 26 }} onClick={() => setSent(false)}>Send another</button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ PRIVACY PAGE ============ */
const PRIVACY = [
  ['What we collect', 'Account details you give us (name, work email, organization), the maintenance data you put into Xaint (assets, maintenance needs, work orders, documents, invoices), and basic technical data — device type, app version, and usage events that help us keep Xaint running smoothly.'],
  ['How we use it', 'To run the platform, sync your work across devices, support you, and improve the product. We use your operational data to deliver Xaint to you — we do not sell it, and we do not use your maintenance records to train models for other customers.'],
  ['Where it lives', 'Your data is encrypted in transit and at rest, stored with reputable cloud infrastructure providers, and isolated per organization. Offline data on a device stays encrypted until it syncs.'],
  ['Who can see it', 'Only people in your organization with the right role, and the small Xaint team members who need access to operate the service or support you. We never share your data with advertisers.'],
  ['Sharing & processors', 'We rely on a short list of vetted processors (hosting, email, analytics, payments) bound by data-processing agreements. We disclose data to authorities only when legally required, and we tell you unless prohibited.'],
  ['How long we keep it', 'For as long as your account is active, plus a limited window afterwards for legal and accounting needs. You can export or request deletion of your data at any time.'],
  ['Your rights', 'Access, correct, export, or delete your personal data; object to or restrict certain processing; and withdraw consent where we rely on it. Reach us and we will action verified requests promptly.'],
  ['Changes', 'If we make material changes to this policy we will notify you in-product or by email before they take effect. The date below always reflects the current version.'],
];

function PrivacyPage({ go }) {
  const ref = useReveal();
  return (
    <main ref={ref}>
      <PageHead code="V" kicker="Privacy / your data, your line"
        title="Your data stays yours, handled with care."
        sub="Xaint exists to give your team the full picture of your operation. The data that makes that possible is yours; here is exactly how we handle it." />

      <section className="section">
        <div className="wrap">
          <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 'clamp(8px,2vw,20px)' }}>
            <span className="mono tag-accent" style={{ fontSize: '0.72rem', letterSpacing: '0.1em' }}>LAST UPDATED</span>
            <span className="mono" style={{ fontSize: '0.78rem', color: 'var(--ink-2)' }}>1 June 2026</span>
          </div>
          <div className="spec-table" style={{ borderTop: '1px solid var(--line)' }}>
            {PRIVACY.map((s, i) => (
              <div key={i} className="spec-row reveal" style={{ display: 'grid',
                   gridTemplateColumns: '64px 1.1fr 2fr', gap: 'clamp(16px,3vw,40px)', alignItems: 'start',
                   padding: 'clamp(22px,2.8vw,32px) 0', borderBottom: '1px solid var(--line)', '--rd': `${i * 40}ms` }}>
                <span className="mono tabnum tag-accent" style={{ fontSize: '0.9rem', marginTop: 4 }}>{String(i + 1).padStart(2, '0')}</span>
                <h3 className="h-md" style={{ lineHeight: 1.2 }}>{s[0]}</h3>
                <p style={{ color: 'var(--ink-2)', fontSize: '0.98rem', lineHeight: 1.65, maxWidth: '62ch' }}>{s[1]}</p>
              </div>
            ))}
          </div>

          <div className="reveal" style={{ marginTop: 'clamp(32px,4vw,52px)', padding: 'clamp(24px,3vw,34px)',
               border: '1px solid var(--line)', borderRadius: 4, background: 'var(--bg-2)', position: 'relative',
               display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' }}>
            <CornerTicks color="var(--accent)" />
            <div>
              <h3 className="h-md">Questions about your data?</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: '0.95rem', marginTop: 8, maxWidth: '46ch' }}>
                Reach our team directly — every privacy request gets a real, considered reply.
              </p>
            </div>
            <Btn arrow href="#contact" onClick={e => { e.preventDefault(); go('contact'); }}>Contact us</Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PlatformPage, CollaborationPage, AboutPage, PrivacyPage, DemoPage, ContactPage, PageHead, CTASlim });