const { Button, Card, Badge, Field, Input, Textarea, Select, Checkbox, Alert, Pagination, Breadcrumbs, Callout, EmptyState } = window.ZaviFxDesignSystem_f15c31;

function InsightsPage({ go }) {
  const [page, setPage] = React.useState(1);
  return (
    <>
      <PageHero eyebrow="Insights" title="Notes on search, websites and growth"
        intro="Practical write-ups from client work. No gated PDFs." />
      <Section pad="var(--space-section)">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-lg)' }}>
          {INSIGHTS.map((a, i) => (
            <article key={a.t} style={{ border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-card)', overflow: 'hidden', background: 'var(--color-canvas)' }}>
              <div style={{ height: 140, background: i % 2 ? 'linear-gradient(150deg,#F2F2F1,#E6E6E4)' : 'radial-gradient(120% 90% at 80% 10%, #FFC463 0%, rgba(255,196,99,0) 60%), linear-gradient(150deg,#F2701C,#B0130F)' }} />
              <div style={{ padding: 'var(--space-lg)', display: 'flex', flexDirection: 'column', gap: 'var(--space-xs)' }}>
                <Badge>{a.k}</Badge>
                <h2 className="t-card-title" style={{ marginTop: 'var(--space-xxs)' }}>{a.t}</h2>
                <p className="zx-card__body">{a.d}</p>
                <span style={{ fontSize: 'var(--type-caption-size)', color: 'var(--text-muted)' }}>REPLACE: author · date · 6 min read</span>
                <Button variant="text" size="sm" iconRight={<Arrow />}>Read article</Button>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 'var(--space-xxl)' }}><Pagination page={page} total={4} onChange={setPage} /></div>
      </Section>

      <Section tone="sunken" eyebrow="Article template" title="What a technical SEO audit should actually deliver" pad="var(--space-section)">
        <div style={{ maxWidth: 720, display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
          <Breadcrumbs items={[{ label: 'Insights', href: '#' }, { label: 'SEO', href: '#' }, { label: 'Technical audits' }]} />
          <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7 }}>An audit is only useful if a developer can act on it the same week. That means findings ranked by impact, each with the exact template or URL pattern affected, the fix, and the verification step.</p>
          <Callout variant="note">Ask any agency for a sample audit before you sign. If it is mostly screenshots of tool scores, it is a report, not a plan.</Callout>
          <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7 }}>REPLACE: the rest of the article body. This template supports headings, lists, callouts, code blocks and images from the design system.</p>
        </div>
      </Section>
      <CTAStrip go={go} />
    </>
  );
}

function ContactPage({ go }) {
  const [sent, setSent] = React.useState(false);
  const [errors, setErrors] = React.useState({});
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', company: '', website: '', service: SERVICES[1].title, budget: 'REPLACE: budget bands', timeline: 'Within a month', brief: '', consent: false });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
  const submit = (e) => {
    e.preventDefault();
    const err = {};
    if (!form.name.trim()) err.name = 'Tell us who we are speaking with.';
    if (!/.+@.+\..+/.test(form.email)) err.email = 'Enter a valid business email so we can reply.';
    if (!form.brief.trim()) err.brief = 'A sentence or two about the project is enough.';
    if (!form.consent) err.consent = 'We need your consent to store and reply to this enquiry.';
    setErrors(err);
    if (Object.keys(err).length === 0) setSent(true);
  };
  return (
    <>
      <PageHero eyebrow="Contact" title="Book a free consultation"
        intro="Tell us what you are trying to move. We review your site and accounts before the call, so the 30 minutes are spent on decisions, not introductions." />
      <Section pad="var(--space-section)">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.15fr) minmax(0,.85fr)', gap: 'var(--space-section)', alignItems: 'start' }}>
          <form onSubmit={submit} noValidate style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-lg)' }}>
            {sent && <div style={{ gridColumn: '1 / -1' }}><Alert variant="success" title="Enquiry received">We will reply with two proposed call times and the audit checklist. (Demo form — nothing is sent.)</Alert></div>}
            {Object.keys(errors).length > 0 && <div style={{ gridColumn: '1 / -1' }}><Alert variant="error" title="Check the highlighted fields">{Object.values(errors)[0]}</Alert></div>}
            <Field label="Full name" htmlFor="f-name" error={errors.name}><Input id="f-name" value={form.name} onChange={set('name')} state={errors.name ? 'error' : 'default'} placeholder="Ananya Rao" /></Field>
            <Field label="Business email" htmlFor="f-email" error={errors.email}><Input id="f-email" type="email" value={form.email} onChange={set('email')} state={errors.email ? 'error' : 'default'} placeholder="you@company.com" /></Field>
            <Field label="Phone number" htmlFor="f-phone" optional><Input id="f-phone" type="tel" value={form.phone} onChange={set('phone')} placeholder="+91" /></Field>
            <Field label="Company name" htmlFor="f-co" optional><Input id="f-co" value={form.company} onChange={set('company')} /></Field>
            <Field label="Website" htmlFor="f-web" optional helper="If you have one — it helps us prepare."><Input id="f-web" value={form.website} onChange={set('website')} placeholder="https://" /></Field>
            <Field label="Service required" htmlFor="f-svc"><Select id="f-svc" value={form.service} onChange={set('service')} options={SERVICES.map((s) => s.title).concat(['Not sure yet'])} /></Field>
            <Field label="Estimated budget" htmlFor="f-budget" helper="REPLACE: set your real budget bands."><Select id="f-budget" value={form.budget} onChange={set('budget')} options={['REPLACE: budget bands', 'Band A', 'Band B', 'Band C', 'Not decided']} /></Field>
            <Field label="Preferred timeline" htmlFor="f-time"><Select id="f-time" value={form.timeline} onChange={set('timeline')} options={['Immediately', 'Within a month', 'This quarter', 'Just exploring']} /></Field>
            <div style={{ gridColumn: '1 / -1' }}>
              <Field label="Project description" htmlFor="f-brief" error={errors.brief} helper={errors.brief ? undefined : 'Goals, current blockers and anything already tried.'}>
                <Textarea id="f-brief" rows={5} value={form.brief} onChange={set('brief')} state={errors.brief ? 'error' : 'default'} placeholder="We are replatforming our store and organic traffic has been flat for two quarters." />
              </Field>
            </div>
            <div style={{ gridColumn: '1 / -1', display: 'flex', gap: 'var(--space-md)', alignItems: 'center', flexWrap: 'wrap' }}>
              <Checkbox label="I agree that ZaviFx may store these details and contact me about this enquiry." checked={form.consent} onChange={set('consent')} />
              <Button type="submit" style={{ marginLeft: 'auto' }}>Book a Free Consultation</Button>
            </div>
            {errors.consent && <div style={{ gridColumn: '1 / -1' }}><span className="zx-help zx-help--error" role="alert">{errors.consent}</span></div>}
          </form>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <Card variant="subtle" eyebrow="Studio" title="Hyderabad, India">
              REPLACE: street address, email and phone. We have not invented contact details.
            </Card>
            <Card variant="doc" title="What happens next">
              <span style={{ display: 'block' }}>1 · A strategist reviews your site and accounts.</span>
              <span style={{ display: 'block' }}>2 · You get two proposed call times.</span>
              <span style={{ display: 'block' }}>3 · After the call: a written summary and scope options.</span>
            </Card>
            <Card variant="doc" title="Response time">REPLACE: state your real response commitment.</Card>
            <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap' }}><Badge>NDA on request</Badge><Badge>Remote-friendly</Badge></div>
          </div>
        </div>
      </Section>
    </>
  );
}

function LegalPage({ go }) {
  return (
    <>
      <PageHero eyebrow="Legal" title="Privacy policy & terms" intro="Template scaffolding. Have both reviewed by a legal professional before publishing." />
      <Section pad="var(--space-section)">
        <div style={{ maxWidth: 720, display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
          <Callout variant="warning">These pages contain placeholder clauses only. ZaviFx must supply the final legal text.</Callout>
          {[['Privacy policy', ['What we collect', 'How enquiry data is used', 'Analytics and cookies', 'Third-party processors', 'Retention period', 'Your rights and how to exercise them', 'Contact for data requests']],
            ['Terms & conditions', ['Scope of services', 'Quotations and fees', 'Payment schedule', 'Client responsibilities', 'Intellectual property and ownership', 'Revisions and approvals', 'Limitation of liability', 'Termination', 'Governing law and jurisdiction']]].map(([t, items]) => (
            <section key={t}>
              <h2 className="t-h2">{t}</h2>
              <ul style={{ margin: 'var(--space-md) 0 0', paddingLeft: 'var(--space-lg)', color: 'var(--text-secondary)', lineHeight: 1.8 }}>
                {items.map((i) => <li key={i}>{i} — <span style={{ color: 'var(--text-muted)' }}>REPLACE with final wording.</span></li>)}
              </ul>
            </section>
          ))}
        </div>
      </Section>
    </>
  );
}

function NotFoundPage({ go }) {
  return (
    <section style={{ minHeight: '70vh', display: 'grid', placeItems: 'center', paddingBlock: 'var(--space-section-lg)' }}>
      <div className="zx-container" style={{ textAlign: 'center', maxWidth: 640 }}>
        <img src={ASSETS + 'sphere-static.png'} alt="" style={{ width: 180, margin: '0 auto var(--space-xl)' }} />
        <div className="zx-card__eyebrow">Error 404</div>
        <h1 className="t-display" style={{ color: 'var(--text-strong)', marginTop: 'var(--space-sm)' }}>This page rolled away</h1>
        <p className="t-subtitle" style={{ color: 'var(--text-tertiary)', marginTop: 'var(--space-md)' }}>The link is broken or the page has moved. Try the work, services or contact pages.</p>
        <div style={{ display: 'flex', gap: 'var(--space-sm)', justifyContent: 'center', marginTop: 'var(--space-xl)', flexWrap: 'wrap' }}>
          <Button onClick={() => go('home')}>Back to home</Button>
          <Button variant="secondary" onClick={() => go('work')}>View Our Work</Button>
          <Button variant="text" onClick={() => go('contact')}>Contact</Button>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { InsightsPage, ContactPage, LegalPage, NotFoundPage });
