// Sybre — About, Insights, Contact pages

function AboutPage() {
  return (
    <Page>
      <section className="page-hero" style={{ position:'relative', overflow:'hidden' }}>
        <div aria-hidden="true" className="hero-splash" style={{ backgroundImage:'url(assets/Images/bw_geo01.jpg)' }} />
        <div className="container" style={{ position:'relative' }}>
          <Reveal>
            <div className="eyebrow accent" style={{ marginBottom: 24 }}>About</div>
            <h1 className="h-hero" style={{ marginBottom: 36, maxWidth: 980 }}>
              A boutique MSP, started by people who'd <em className="accent">had enough</em> of the alternative.
            </h1>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48, maxWidth: 1040 }}>
              <p className="lead lg">
                Sybre was founded in 2024 in North Sydney. We'd spent fifteen years between us inside large MSPs and in-house IT, watching the same pattern: senior engineers sold the work, junior staff did the work, and clients ended up calling the partner directly when it mattered.
              </p>
              <p className="lead lg">
                We took the parts that worked — the rigour, the documentation, the discipline around change control — and stripped out the rest. Few clients. Senior engineers on every engagement. A single phone number when you need it.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* VALUES */}
      <section className="section">
        <div className="container">
          <SectionHead num="01" label="Values" title="Four <em>operating principles</em>." />
          <Reveal stagger className="grid-4">
            {[
              { n:'01', t:'Clarity', b:'Every recommendation comes with the trade-offs spelled out. No false certainty.' },
              { n:'02', t:'Accountability', b:'You know who is doing the work. They know your environment. They answer the phone.' },
              { n:'03', t:'Depth', b:'We say no to engagements we can’t do well. We’d rather lose a deal than fake competence.' },
              { n:'04', t:'Restraint', b:'The right tool, not the most expensive one. Boring infrastructure beats novel infrastructure.' },
            ].map(v => (
              <div key={v.n} className="card" style={{ minHeight: 200 }}>
                <h3 className="h-card" style={{ marginBottom: 12 }}>{v.t}</h3>
                <p className="body">{v.b}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* TEAM */}
      <section className="band">
        <div className="container">
          <SectionHead num="02" label="Team" title="The people <em>doing the work</em>." />
          <Reveal stagger className="grid-3">
            {[
              { name:'Varant', role:'Founder & principal engineer', bio:'Fifteen years across infrastructure, identity, and security. Spent four years inside an enterprise MSP before deciding the model was broken.', placeholder:true },
              { name:'PLACEHOLDER', role:'Senior engineer', bio:'Bio and headshot to be supplied by client.', placeholder:true },
              { name:'PLACEHOLDER', role:'Security lead', bio:'Bio and headshot to be supplied by client.', placeholder:true },
            ].map((p, i) => (
              <div key={i} className="card" style={{ padding: 0, overflow:'hidden' }}>
                <div className="img-placeholder" style={{ borderRadius: 0, minHeight: 240, borderLeft:'none', borderRight:'none', borderTop:'none' }}>
                  Team headshot
                  <span>{p.name === 'Varant' ? 'Real photo of Varant on a #1A1818 card.' : 'Photo to be supplied.'}</span>
                </div>
                <div style={{ padding: '32px 36px' }}>
                  {p.placeholder && p.name !== 'Varant' && (
                    <span className="placeholder" style={{ marginBottom: 12 }}>Name & bio — needs human input</span>
                  )}
                  <h3 className="h-card" style={{ marginTop: 8, marginBottom: 6, fontSize: 22 }}>{p.name}</h3>
                  <div className="meta" style={{ marginBottom: 14 }}>{p.role}</div>
                  <p className="body">{p.bio}</p>
                </div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* HOW WE MEASURE */}
      <section className="section">
        <div className="container" style={{ display:'grid', gridTemplateColumns:'1fr 1.3fr', gap: 80, alignItems:'center' }}>
          <Reveal>
            <h2 className="h-section">One number we <em className="accent">refuse to soften</em>.</h2>
          </Reveal>
          <Reveal>
            <div className="card sage-fill" style={{ padding:'56px 48px' }}>
              <div className="stat-num" style={{ fontSize:'clamp(72px, 10vw, 120px)', color:'var(--sybre-black)' }}>100%</div>
              <div className="stat-label" style={{ marginTop: 18, fontSize: 16, maxWidth: 420, color:'rgba(18,16,16,0.6)' }}>
                Breach prevention across the client base since founding. We track this monthly. The day it changes, this page changes.
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <FinalCTA num="04" />
    </Page>
  );
}

// ── Insights ─────────────────────────────────────────────────
function InsightsPage() {
  const [filter, setFilter] = React.useState('All');
  const cats = ['All', 'AI', 'Security', 'Operations', 'Strategy'];
  const articles = [
    { cat:'AI',         title:'Local LLMs in 2026: where the hardware actually lands.', date:'02/05/2026', excerpt:'A practical look at the Blackwell-class workstation cards and what they mean for 30B-parameter deployments.', real:true },
    { cat:'Security',   title:'Essential Eight maturity, without the consultant’s slide deck.', date:'18/04/2026', excerpt:'A field guide to getting from Level 1 to Level 2 in nine months — written by an engineer, not an auditor.', real:true },
    { cat:'AI',         title:'RAG vs. fine-tuning: how to actually decide.', date:'PLACEHOLDER', excerpt:'Article to be commissioned.', placeholder:true },
    { cat:'Operations', title:'Why we don’t do tier-1 ticket queues.', date:'PLACEHOLDER', excerpt:'Article to be commissioned.', placeholder:true },
    { cat:'Strategy',   title:'A boutique MSP’s case for saying no.', date:'PLACEHOLDER', excerpt:'Article to be commissioned.', placeholder:true },
    { cat:'Security',   title:'Phishing simulations: measurement, not theatre.', date:'PLACEHOLDER', excerpt:'Article to be commissioned.', placeholder:true },
  ];
  const filtered = filter === 'All' ? articles : articles.filter(a => a.cat === filter);

  return (
    <Page>
      <section className="page-hero" style={{ position:'relative', overflow:'hidden' }}>
        <div aria-hidden="true" className="hero-splash" style={{ backgroundImage:'url(assets/Images/bw_geo02.jpg)' }} />
        <div className="container" style={{ position:'relative' }}>
          <Reveal>
            <div className="eyebrow accent" style={{ marginBottom: 24 }}>Insights</div>
            <h1 className="h-hero" style={{ marginBottom: 24 }}>Field notes from the <em className="accent">engine room</em>.</h1>
            <p className="lead lg">Articles, case studies, and the occasional opinion. Written by the engineers doing the work — not the marketing team.</p>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display:'flex', gap: 8, flexWrap:'wrap', marginBottom: 40 }}>
            {cats.map(c => (
              <button key={c}
                className={'nav-link' + (filter === c ? ' active' : '')}
                onClick={() => setFilter(c)}>
                {c}
              </button>
            ))}
          </div>

          <Reveal stagger className="grid-3" key={filter}>
            {filtered.map((a, i) => (
              <article key={i} className="card is-link" style={{ padding: 0, overflow:'hidden', display:'flex', flexDirection:'column' }}>
                <div className="img-placeholder" style={{ borderRadius: 0, minHeight: 180, borderLeft:'none', borderRight:'none', borderTop:'none' }}>
                  Article thumbnail
                  <span>Brand-aligned editorial image.</span>
                </div>
                <div style={{ padding:'28px 32px', display:'flex', flexDirection:'column', flex: 1 }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
                    <span className={'pill' + (a.cat === 'AI' ? ' sage' : '')}>{a.cat}</span>
                    <span className="meta" style={{ fontSize: 12 }}>{a.placeholder ? <span className="placeholder">Date</span> : a.date}</span>
                  </div>
                  <h3 className="h-card" style={{ marginBottom: 12, fontSize: 19 }}>{a.title}</h3>
                  <p className="body" style={{ marginBottom: 20, flex: 1 }}>{a.excerpt}</p>
                  {a.placeholder && <span className="placeholder">Article — needs commissioning</span>}
                </div>
              </article>
            ))}
          </Reveal>
        </div>
      </section>

      <FinalCTA num="02" label="Next step" title="Want a deeper <em>conversation</em>?" />
    </Page>
  );
}

// ── Contact ─────────────────────────────────────────────────
function ContactPage() {
  const [form, setForm] = React.useState({ name:'', email:'', company:'', type:'', message:'' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Valid email required';
    if (!form.company.trim()) e.company = 'Required';
    if (!form.type) e.type = 'Pick one';
    if (form.message.trim().length < 10) e.message = 'A sentence or two is plenty';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (validate()) setSent(true);
  };

  const handle = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(prev => { const n = { ...prev }; delete n[k]; return n; });
  };

  return (
    <Page>
      <section className="page-hero" style={{ position:'relative', overflow:'hidden' }}>
        <div aria-hidden="true" className="hero-splash" style={{ backgroundImage:'url(assets/Images/bw_geo03.jpg)' }} />
        <div className="container" style={{ position:'relative' }}>
          <Reveal>
            <div className="eyebrow accent" style={{ marginBottom: 24 }}>Contact</div>
            <h1 className="h-hero" style={{ marginBottom: 24 }}>
              Let's <em className="accent">scope</em> it.
            </h1>
            <p className="lead lg">A 30-minute discovery call. We listen, ask better questions than you'd expect, and tell you whether we can help — honestly. We reply within one business day.</p>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 64 }} className="contact-grid">
            <Reveal>
              {sent ? (
                <div className="card" style={{ padding: 56 }}>
                  <div className="eyebrow accent" style={{ marginBottom: 18 }}>Message received</div>
                  <h2 className="h-section" style={{ marginBottom: 16, fontSize: 'clamp(28px, 3.5vw, 40px)' }}>
                    Thanks, {form.name.split(' ')[0]}.
                  </h2>
                  <p className="lead" style={{ marginBottom: 28 }}>
                    We've got it. You'll hear from a senior engineer within one business day — not a sales rep, not an auto-responder.
                  </p>
                  <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name:'', email:'', company:'', type:'', message:'' }); }}>
                    Send another
                  </button>
                </div>
              ) : (
                <form onSubmit={submit} noValidate style={{ display:'flex', flexDirection:'column', gap: 24 }}>
                  <div className="grid-2" style={{ gap: 24 }}>
                    <FormField label="Your name" k="name" form={form} onChange={handle} errors={errors} placeholder="Alex Nguyen" />
                    <FormField label="Work email" k="email" form={form} onChange={handle} errors={errors} placeholder="alex@yourdomain.com.au" type="email" />
                  </div>
                  <FormField label="Company" k="company" form={form} onChange={handle} errors={errors} placeholder="Your company" />
                  <div className="field">
                    <label className="field-label" htmlFor="type">Project type</label>
                    <select id="type" className="field-select" value={form.type} onChange={e => handle('type', e.target.value)}
                            style={{ borderColor: errors.type ? 'var(--burnt-orange)' : undefined }}>
                      <option value="">Select one…</option>
                      <option>Managed IT — ongoing</option>
                      <option>Cybersecurity assessment</option>
                      <option>AI infrastructure / local LLM</option>
                      <option>Consulting & design</option>
                      <option>Not sure yet</option>
                    </select>
                    {errors.type && <span style={{ color:'var(--burnt-orange)', fontSize:12 }}>{errors.type}</span>}
                  </div>
                  <div className="field">
                    <label className="field-label" htmlFor="message">How can we help?</label>
                    <textarea id="message" className="field-textarea" rows="5"
                              placeholder="A sentence or two on what you're dealing with."
                              value={form.message} onChange={e => handle('message', e.target.value)}
                              style={{ borderColor: errors.message ? 'var(--burnt-orange)' : undefined }} />
                    {errors.message && <span style={{ color:'var(--burnt-orange)', fontSize:12 }}>{errors.message}</span>}
                  </div>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 16 }}>
                    <span className="meta">We reply within one business day.</span>
                    <button type="submit" className="btn btn-primary">Send message</button>
                  </div>
                </form>
              )}
            </Reveal>

            <Reveal>
              <div style={{ display:'flex', flexDirection:'column', gap: 24 }}>
                <div className="card">
                  <div className="eyebrow" style={{ marginBottom: 14 }}>Direct</div>
                  <a href="mailto:info@sybre.com.au" style={{ display:'block', fontFamily:'var(--font-display)', fontSize: 22, fontWeight:500, marginBottom: 8 }}>info@sybre.com.au</a>
                  <a href="tel:+61272341455" style={{ display:'block', fontFamily:'var(--font-display)', fontSize: 22, fontWeight:500 }}>(02) 7234 1455</a>
                </div>
                <div className="card">
                  <div className="eyebrow" style={{ marginBottom: 14 }}>Visit</div>
                  <p className="body" style={{ color:'var(--fg1)' }}>
                    Suite 203, Level 8<br/>
                    99 Walker Street<br/>
                    North Sydney NSW 2060
                  </p>
                  <div style={{
                    marginTop: 20, height: 160,
                    background:'var(--sybre-black)',
                    borderRadius:'var(--r-inner)',
                    border:'1px solid var(--border-1)',
                    position:'relative', overflow:'hidden',
                  }}>
                    {/* stylised low-opacity map */}
                    <svg viewBox="0 0 400 160" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
                      <g stroke="rgba(255,255,255,0.10)" strokeWidth="0.6" fill="none">
                        {Array.from({length: 14}).map((_, i) => <line key={i} x1={i*30} y1="0" x2={i*30 - 40} y2="160" />)}
                        {Array.from({length: 8}).map((_, i) => <line key={i} x1="0" y1={i*22} x2="400" y2={i*22 - 30} />)}
                      </g>
                      <circle cx="210" cy="78" r="6" fill="#C8652A" />
                      <circle cx="210" cy="78" r="14" fill="none" stroke="#C8652A" strokeWidth="1" opacity="0.5">
                        <animate attributeName="r" from="8" to="20" dur="2s" repeatCount="indefinite" />
                        <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite" />
                      </circle>
                    </svg>
                    <div style={{ position:'absolute', bottom: 12, left: 16, fontSize: 11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--fg4)' }}>
                      North Sydney
                    </div>
                  </div>
                </div>
                <div className="card">
                  <div className="eyebrow" style={{ marginBottom: 14 }}>Book directly</div>
                  <p className="body" style={{ marginBottom: 18 }}>Skip the form. Pick a 30-minute slot that suits.</p>
                  <a href="#/contact" className="btn btn-ghost btn-arrow">
                    <span className="placeholder" style={{ marginRight: 8 }}>Calendar link</span>
                  </a>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 920px) {
          .contact-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Page>
  );
}

function FormField({ label, k, form, onChange, errors, placeholder, type='text' }) {
  return (
    <div className="field">
      <label className="field-label" htmlFor={k}>{label}</label>
      <input id={k} type={type} className="field-input" placeholder={placeholder}
             value={form[k]} onChange={e => onChange(k, e.target.value)}
             style={{ borderColor: errors[k] ? 'var(--burnt-orange)' : undefined }} />
      {errors[k] && <span style={{ color:'var(--burnt-orange)', fontSize:12 }}>{errors[k]}</span>}
    </div>
  );
}

Object.assign(window, { AboutPage, InsightsPage, ContactPage });