// Metis — Page Components

const T = {
  cream: '#F6F7FA',
  dark: '#16213E',
  sage: '#5B6B8C',
  accent: '#1F5FBF',
  creamDark: '#E9ECF3',
};

const Label = ({ children, color = T.accent }) => (
  <div style={{
    fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px',
    letterSpacing: '4px', textTransform: 'uppercase', color,
    marginBottom: '20px',
  }}>{children}</div>
);

const EditorialHeading = ({ children, size = 72, style = {} }) => (
  <h1 style={{
    fontFamily: "Cormorant Garamond, Georgia, serif",
    fontStyle: 'italic', fontSize: `${size}px`, lineHeight: 1.05,
    color: T.dark, margin: 0, fontWeight: 'normal',
    textWrap: 'pretty', ...style,
  }}>{children}</h1>
);

const SansBody = ({ children, style = {} }) => (
  <p style={{
    fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '20px',
    lineHeight: 1.7, color: 'rgba(22,33,62,0.85)', margin: 0, ...style,
  }}>{children}</p>
);

const DarkBtn = ({ children, onClick }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '19px',
        letterSpacing: '2.5px', textTransform: 'uppercase',
        background: hov ? T.accent : T.dark, color: T.cream,
        border: 'none', padding: '14px 32px', cursor: 'pointer',
        transition: 'background 0.25s, transform 0.2s, box-shadow 0.2s',
        transform: hov ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hov ? '0 8px 24px rgba(22,33,62,0.22)' : 'none',
      }}>{children}</button>
  );
};

const GhostBtn = ({ children, onClick }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '19px',
        letterSpacing: '2.5px', textTransform: 'uppercase',
        background: 'transparent',
        border: `1px solid ${hov ? T.accent : T.dark}`,
        padding: '13px 32px', cursor: 'pointer',
        transition: 'all 0.25s, transform 0.2s, box-shadow 0.2s',
        color: hov ? T.accent : T.dark,
        transform: hov ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hov ? '0 8px 24px rgba(22,33,62,0.12)' : 'none',
      }}>{children}</button>
  );
};

// ─── CUSTOM SELECT ────────────────────────────────────────────────────────

const CustomSelect = ({ value, onChange, options, placeholder = 'Select…', error }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const selected = options.find(o => o.value === value);

  React.useEffect(() => {
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  return (
    <div ref={ref} style={{ position: 'relative', userSelect: 'none' }}>
      {/* Trigger */}
      <div
        onClick={() => setOpen(o => !o)}
        style={{
          padding: '11px 0', borderBottom: `1px solid ${error ? T.accent : open ? T.dark : 'rgba(22,33,62,0.2)'}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          cursor: 'pointer', transition: 'border-color 0.2s',
          fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '19px',
          color: selected ? T.dark : 'rgba(22,33,62,0.65)',
        }}
      >
        <span>{selected ? selected.label : placeholder}</span>
        <svg width="10" height="6" viewBox="0 0 10 6" fill="none"
          style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s', flexShrink: 0 }}>
          <path d="M1 1l4 4 4-4" stroke={T.dark} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>

      {/* Dropdown panel */}
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 2px)', left: 0, right: 0, zIndex: 200,
          background: T.cream, border: `1px solid rgba(22,33,62,0.15)`,
          boxShadow: '0 12px 40px rgba(22,33,62,0.12)',
          animation: 'fadeIn 0.15s ease',
        }}>
          {options.map(opt => (
            <div
              key={opt.value}
              onClick={() => { onChange(opt.value); setOpen(false); }}
              style={{
                padding: '14px 16px',
                fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px',
                color: value === opt.value ? T.dark : 'rgba(22,33,62,0.85)',
                background: value === opt.value ? T.creamDark : 'transparent',
                borderBottom: '1px solid rgba(22,33,62,0.06)',
                cursor: 'pointer', transition: 'background 0.15s',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}
              onMouseEnter={e => { if (value !== opt.value) e.currentTarget.style.background = T.creamDark; }}
              onMouseLeave={e => { if (value !== opt.value) e.currentTarget.style.background = 'transparent'; }}
            >
              <span>{opt.label}</span>
              {value === opt.value && (
                <svg width="12" height="9" viewBox="0 0 12 9" fill="none">
                  <path d="M1 4l3.5 3.5L11 1" stroke={T.sage} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const Divider = ({ style = {} }) => (
  <div style={{ borderTop: `1px solid rgba(22,33,62,0.12)`, ...style }} />
);

const ImgPlaceholder = ({ label, width = '100%', height = 320, bg = T.creamDark }) => (
  <div style={{
    width, height, background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
    backgroundImage: 'repeating-linear-gradient(45deg, rgba(22,33,62,0.04) 0px, rgba(22,33,62,0.04) 1px, transparent 1px, transparent 12px)',
    flexDirection: 'column', gap: '10px',
  }}>
    <span style={{ fontFamily: 'monospace', fontSize: '19px', color: 'rgba(22,33,62,0.55)', textAlign: 'center', padding: '0 24px' }}>{label}</span>
  </div>
);

// ─── HOME PAGE ──────────────────────────────────────────────────────────────

const HomeEditorial = ({ setPage }) => (
  <div style={{ background: T.cream }}>
    {/* Hero */}
    <section style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '120px 48px 80px', textAlign: 'center' }}>
      <Label>Workers' Compensation · Risk Intelligence</Label>
      <EditorialHeading size={96} style={{ maxWidth: '860px', marginBottom: '48px' }}>
        Verify every business.<br />Instantly.
      </EditorialHeading>
      <SansBody style={{ maxWidth: '480px', marginBottom: '48px' }}>
        Metis is the pre-submission risk intelligence platform built for insurance agents — digitizing workers' comp risk evaluation so you can quote faster, smarter, and with confidence.
      </SansBody>
      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', justifyContent: 'center' }}>
        <DarkBtn onClick={() => setPage('contact')}>View a Demo</DarkBtn>
        <GhostBtn onClick={() => setPage('solutions')}>See How It Works</GhostBtn>
      </div>
      <div style={{ marginTop: '80px', display: 'flex', gap: '48px', flexWrap: 'wrap', justifyContent: 'center' }}>
        {[['Pre-submission', 'Risk Evaluation'], ['Instant', 'Business Verification'], ['Built for', 'Insurance Agents']].map(([line1, line2]) => (
          <div key={line1} style={{ textAlign: 'center', minWidth: '140px' }}>
            <div style={{ width: '6px', height: '6px', background: T.sage, borderRadius: '50%', margin: '0 auto 12px' }} />
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '12px', letterSpacing: '1.5px', textTransform: 'uppercase', color: T.dark, opacity: 0.5 }}>{line1}</div>
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '12px', letterSpacing: '1.5px', textTransform: 'uppercase', color: T.dark, opacity: 0.5 }}>{line2}</div>
          </div>
        ))}
      </div>
    </section>

    <Divider />

    {/* Value Props */}
    <section style={{ padding: '100px 48px', maxWidth: '1100px', margin: '0 auto' }}>
      <Label>The Platform</Label>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '48px', marginTop: '48px' }}>
        {[
          { num: '01', title: 'Instant Business Verification', body: 'Pull entity status, OSHA history, contractor licensing, and X-Mod scores from authoritative sources — in seconds, not hours.' },
          { num: '02', title: 'Pre-Submission Risk Scoring', body: 'Evaluate workers\' comp risk before the submission leaves your desk. Catch red flags early and improve placement rates.' },
          { num: '03', title: 'Built for Agents', body: 'Designed for the way agents work. No complex onboarding, no carrier dependency. Start verifying on day one.' },
        ].map(item => (
          <div key={item.num}>
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '48px', color: T.sage, lineHeight: 1, marginBottom: '20px' }}>{item.num}</div>
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '22px', color: T.dark, marginBottom: '14px' }}>{item.title}</div>
            <SansBody>{item.body}</SansBody>
          </div>
        ))}
      </div>
    </section>

    <Divider />

    {/* CTA Band */}
    <section style={{ background: T.dark, padding: '100px 48px', textAlign: 'center' }}>
      <Label color={T.sage}>See It Live</Label>
      <EditorialHeading size={64} style={{ color: T.cream, maxWidth: '640px', margin: '0 auto 32px' }}>
        Ready to transform your workflow?
      </EditorialHeading>
      <InlineLightBtn onClick={() => setPage('contact')}>View a Demo</InlineLightBtn>
    </section>
  </div>
);

const HomeSplit = ({ setPage }) => (
  <div style={{ background: T.cream }}>
    {/* Hero Split */}
    <section style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr 1fr', paddingTop: '80px' }}>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '80px 56px 80px 56px', borderRight: '1px solid rgba(22,33,62,0.1)' }}>
        <Label>Workers' Compensation · Risk Intelligence</Label>
        <EditorialHeading size={72} style={{ marginBottom: '28px' }}>
          Verify every business.<br />Instantly.
        </EditorialHeading>
        <SansBody style={{ marginBottom: '40px', maxWidth: '420px' }}>
          Metis digitizes the pre-submission workers' comp risk evaluation process — giving insurance agents the speed and confidence to quote more, faster.
        </SansBody>
        <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap' }}>
          <DarkBtn onClick={() => setPage('contact')}>View a Demo</DarkBtn>
          <GhostBtn onClick={() => setPage('solutions')}>Explore Solutions</GhostBtn>
        </div>
        <div style={{ marginTop: '64px', display: 'flex', gap: '40px' }}>
          {[['10x', 'Faster Evaluation'], ['Zero', 'Carrier Dependency'], ['100%', 'Agent-Focused']].map(([stat, label]) => (
            <div key={stat}>
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '32px', color: T.dark }}>{stat}</div>
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px', letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(22,33,62,0.72)', marginTop: '4px' }}>{label}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ background: T.creamDark, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'repeating-linear-gradient(45deg, rgba(22,33,62,0.03) 0px, rgba(22,33,62,0.03) 1px, transparent 1px, transparent 16px)',
        }} />
        <div style={{ position: 'relative', background: T.cream, padding: '32px', width: '72%', boxShadow: '0 24px 64px rgba(22,33,62,0.1)' }}>
          <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '12px', letterSpacing: '3px', textTransform: 'uppercase', color: T.sage, marginBottom: '16px' }}>Risk Evaluation Dashboard</div>
          {[
            { label: 'Business Verified', status: 'complete' },
            { label: 'FEIN Confirmed', status: 'complete' },
            { label: 'Payroll Estimate', status: 'complete' },
            { label: 'Risk Score Generated', status: 'active' },
            { label: 'Submission Ready', status: 'pending' },
          ].map(row => (
            <div key={row.label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px solid rgba(22,33,62,0.08)' }}>
              <span style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '17px', color: T.dark, opacity: row.status === 'pending' ? 0.35 : 1 }}>{row.label}</span>
              <span style={{
                fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '12px', letterSpacing: '1.5px', textTransform: 'uppercase',
                color: row.status === 'complete' ? T.sage : row.status === 'active' ? T.accent : 'rgba(22,33,62,0.3)',
              }}>{row.status === 'complete' ? '✓ Done' : row.status === 'active' ? '● Live' : '– Pending'}</span>
            </div>
          ))}
          <div style={{ marginTop: '20px', background: T.dark, padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '18px', color: T.cream }}>Risk Score</span>
            <span style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '22px', color: T.sage }}>A–</span>
          </div>
        </div>
      </div>
    </section>

    <Divider />

    {/* Features row */}
    <section style={{ padding: '80px 56px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '40px' }}>
      {[
        { title: 'Instant Verification', body: 'Real-time business data from authoritative sources.' },
        { title: 'Pre-Sub Risk Scoring', body: 'Evaluate risk before the submission leaves your desk.' },
        { title: 'Agent-Native Design', body: 'No complex onboarding. Start quoting on day one.' },
        { title: 'Carrier Independent', body: 'Works across markets. No lock-in, no gatekeeping.' },
      ].map(f => (
        <div key={f.title} style={{ paddingLeft: '20px', borderLeft: `2px solid ${T.sage}` }}>
          <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '20px', color: T.dark, marginBottom: '10px' }}>{f.title}</div>
          <SansBody style={{ fontSize: '18px' }}>{f.body}</SansBody>
        </div>
      ))}
    </section>

    {/* Dark CTA */}
    <section style={{ background: T.dark, padding: '80px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '32px' }}>
      <EditorialHeading size={48} style={{ color: T.cream, maxWidth: '520px' }}>
        Ready to transform your submission workflow?
      </EditorialHeading>
      <InlineLightBtn onClick={() => setPage('contact')}>View a Demo</InlineLightBtn>
    </section>
  </div>
);

// ─── ABOUT PAGE ─────────────────────────────────────────────────────────────

const AboutPage = ({ setPage }) => (
  <div style={{ background: T.cream, paddingTop: '80px' }}>
    <section style={{ padding: '100px 48px 80px', maxWidth: '820px', margin: '0 auto', textAlign: 'center' }}>
      <Label>About Metis</Label>
      <EditorialHeading size={72}>
        Counsel for insurance agents.
      </EditorialHeading>
    </section>

    <Divider />

    <section style={{ padding: '80px 48px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', maxWidth: '1100px', margin: '0 auto', alignItems: 'start' }}>
      <div>
        <Label>Our Mission</Label>
        <EditorialHeading size={40} style={{ marginBottom: '24px' }}>
          We built the tool we wished existed.
        </EditorialHeading>
        <SansBody style={{ marginBottom: '20px' }}>
          Workers' compensation is one of the most complex, data-intensive lines of insurance — yet the pre-submission process for agents is still largely manual, fragmented, and slow. Metis changes that.
        </SansBody>
        <SansBody style={{ marginBottom: '20px' }}>
          Our platform transforms hours of underwriting research into minutes, giving agents instant access to the business intelligence they need to evaluate risk, build stronger submissions, and move opportunities forward faster.
        </SansBody>
        <SansBody>
          Less research. Better submissions. More placement.
        </SansBody>
      </div>
      <div>
        <Label>Our Story</Label>
        <EditorialHeading size={40} style={{ marginBottom: '24px' }}>
          A front-row seat to the industry.
        </EditorialHeading>
        <SansBody style={{ marginBottom: '20px' }}>
          Metis began with a front-row seat to the workers' compensation industry.
        </SansBody>
        <SansBody style={{ marginBottom: '20px' }}>
          Growing up, our founder watched his father build and operate a workers' compensation underwriting agency and saw firsthand the challenges caused by incomplete information, manual research, and lengthy underwriting processes. Years later, after working closely with underwriters and agents—including family members in the industry—he gained a deeper understanding of the hours spent gathering data, verifying businesses, and preparing submissions.
        </SansBody>
        <SansBody>
          What started as a mission to help one agency work more efficiently became a platform built to help insurance professionals everywhere spend less time researching and more time placing business.
        </SansBody>
      </div>
    </section>

    <Divider />

    <section style={{ padding: '80px 48px', background: T.creamDark }}>
      <div style={{ maxWidth: '1100px', margin: '0 auto' }}>
        <Label>Why Metis</Label>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '48px', marginTop: '40px' }}>
          {[
            { title: 'Deep Domain Expertise', body: 'Built by people who understand workers\' comp — the nuances, the gotchas, and the agent workflow that makes or breaks a placement.' },
            { title: 'Agent-First Philosophy', body: 'We sit on your side of the table. Our product serves agents, not carriers. Every decision we make reflects that.' },
            { title: 'Speed as a Feature', body: 'Time kills deals. Metis compresses the pre-submission research cycle from days to seconds — without sacrificing accuracy.' },
          ].map(item => (
            <div key={item.title}>
              <div style={{ width: '32px', height: '2px', background: T.sage, marginBottom: '20px' }} />
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '20px', color: T.dark, marginBottom: '12px' }}>{item.title}</div>
              <SansBody>{item.body}</SansBody>
            </div>
          ))}
        </div>
      </div>
    </section>

    <Divider />

    <section style={{ padding: '80px 48px', textAlign: 'center' }}>
      <EditorialHeading size={48} style={{ marginBottom: '32px' }}>
        Interested in learning more?
      </EditorialHeading>
      <DarkBtn onClick={() => setPage('contact')}>View a Demo</DarkBtn>
    </section>
  </div>
);

// ─── SOLUTIONS PAGE ──────────────────────────────────────────────────────────

const SolutionsPage = ({ setPage }) => (
  <div style={{ background: T.cream, paddingTop: '80px' }}>
    <section style={{ padding: '100px 48px 80px', maxWidth: '820px', margin: '0 auto', textAlign: 'center' }}>
      <Label>Solutions</Label>
      <EditorialHeading size={72}>
        Everything you need to know before you quote.
      </EditorialHeading>
      <SansBody style={{ marginTop: '24px', maxWidth: '620px', margin: '24px auto 0' }}>
        Metis pulls business entity status, OSHA history, contractor licenses, x-mod scores, DOT safety records, Google satellite and street views, and more into a single report — in under a minute. No more manual research. No more surprises at the carrier.
      </SansBody>
    </section>

    <Divider />

    {/* How it works */}
    <section style={{ padding: '80px 48px', maxWidth: '1100px', margin: '0 auto' }}>
      <Label>How It Works</Label>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '0', marginTop: '40px' }}>
        {[
          { step: '01', title: 'Enter the Business', body: 'Enter the business name, choose the appropriate industry report, and provide the business address. Metis can automatically populate address details from a copied address and instantly recognize previously researched businesses, pulling historical information to streamline the process.' },
          { step: '02', title: 'Metis Does the Research', body: 'In under a minute, Metis pulls Secretary of State status, OSHA violation history, contractor license standing, experience modification scores, DOT safety records, and more — all from authoritative sources, automatically.' },
          { step: '03', title: 'Quote with Confidence', body: 'Review a clean, structured report with a Green / Yellow / Red appetite indicator. Add notes, export to PDF, and walk into the carrier conversation with everything already done.' },
        ].map((item, i) => (
          <div key={item.step} style={{ padding: '40px', borderLeft: i === 0 ? 'none' : '1px solid rgba(22,33,62,0.1)' }}>
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '64px', color: T.sage, lineHeight: 1, marginBottom: '20px' }}>{item.step}</div>
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '22px', color: T.dark, marginBottom: '12px' }}>{item.title}</div>
            <SansBody>{item.body}</SansBody>
          </div>
        ))}
      </div>
    </section>

    <Divider />

    {/* Features detail */}
    <section style={{ background: T.dark, padding: '80px 48px' }}>
      <div style={{ maxWidth: '1100px', margin: '0 auto' }}>
        <Label color={T.sage}>Platform Features</Label>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '40px', marginTop: '48px' }}>
          {[
            { title: 'Secretary of State Verification', body: 'Instant business entity status. Active / Suspended / Terminated status, FTB and SOS standing, officers, registered agent, and formation date — confirmed in seconds, not tabs.' },
            { title: 'OSHA Violation History', body: 'Surface Cal/OSHA citations, violation types, and penalty history before your carrier asks. One of the most overlooked risk signals in workers\' comp underwriting, automated.' },
            { title: 'Contractor License Verification', body: 'Real-time state licensing board lookup for license status, classifications, bond amounts, and expiration dates. Disciplinary actions flagged automatically — no more manual license board searches.' },
            { title: 'Experience Modification (X-Mod) Lookup', body: 'NCCI x-mod access across 39 states, with California WCIRB x-mod coming soon. Most agents don\'t know they can pull this data before quoting — now it\'s automatic on every report.' },
            { title: 'DOT & FMCSA Safety Records', body: 'For commercial auto and trucking risks, Metis pulls SAFER carrier profiles, safety ratings, inspection history, and out-of-service violations. Every commercial risk, fully researched.' },
            { title: 'Appetite Score & Carrier-Ready Report', body: 'Every search delivers a Green / Yellow / Red appetite indicator with all key data points formatted for the carrier conversation. Export to PDF in one click and submit with confidence.' },
            { title: 'Full Report History', body: 'Every report your agency has ever run is saved, searchable, and available in one place. Re-run a report on a returning client in seconds using saved business profiles — no re-entering information.' },
            { title: 'Submission Notes & Deal Tracking', body: 'Add private notes directly to any report to track where a submission stands — carrier conversations, follow-ups, declinations, and wins. Your entire pipeline, organized by risk.' },
            { title: 'Agency Admin Dashboard', body: 'Agency leaders get a real-time view of team activity — reports run, appetite trends, and usage by agent. Know what your team is working on and how the book is shaping up, without asking.' },
          ].map(f => (
            <div key={f.title} style={{ borderTop: `1px solid rgba(246,247,250,0.15)`, paddingTop: '24px' }}>
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '20px', color: T.cream, marginBottom: '10px' }}>{f.title}</div>
              <SansBody style={{ color: 'rgba(246,247,250,0.55)', fontSize: '18px' }}>{f.body}</SansBody>
            </div>
          ))}
        </div>
      </div>
    </section>

    <Divider />

    <section style={{ padding: '80px 48px', textAlign: 'center' }}>
      <Label>Ready to Start</Label>
      <EditorialHeading size={56} style={{ marginBottom: '32px' }}>
        See Metis in action.
      </EditorialHeading>
      <div style={{ display: 'flex', gap: '16px', justifyContent: 'center', flexWrap: 'wrap' }}>
        <DarkBtn onClick={() => setPage('contact')}>View a Demo</DarkBtn>
        <GhostBtn onClick={() => setPage('about')}>Learn About Us</GhostBtn>
      </div>
    </section>
  </div>
);

// ─── INLINE LIGHT BUTTON (for dark backgrounds) ────────────────────────────

const InlineLightBtn = ({ children, onClick }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '19px',
        letterSpacing: '2.5px', textTransform: 'uppercase',
        background: hov ? T.sage : T.cream, color: T.dark,
        border: 'none', padding: '14px 32px', cursor: 'pointer',
        transition: 'background 0.25s, transform 0.2s, box-shadow 0.2s',
        transform: hov ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hov ? '0 8px 24px rgba(0,0,0,0.25)' : 'none',
      }}>{children}</button>
  );
};

// ─── VIEW DEMO PAGE ──────────────────────────────────────────────────────────

const ContactPage = () => {
  const [playing, setPlaying] = React.useState(false);
  const videoRef = React.useRef(null);

  const handlePlay = () => {
    setPlaying(true);
    if (videoRef.current) videoRef.current.play();
  };

  return (
    <div style={{ background: T.cream, paddingTop: '80px' }}>

      {/* Header */}
      <section style={{ padding: '80px 48px 60px', textAlign: 'center', maxWidth: '760px', margin: '0 auto' }}>
        <Label>Product Demo</Label>
        <EditorialHeading size={72} style={{ marginBottom: '20px' }}>
          See Metis in action.
        </EditorialHeading>
        <SansBody style={{ maxWidth: '520px', margin: '0 auto' }}>
          Watch how Metis transforms the pre-submission workers' comp risk evaluation process — from hours of manual research to instant, agent-ready intelligence.
        </SansBody>
      </section>

      <Divider />

      {/* Video Player */}
      <section style={{ padding: '72px 48px', maxWidth: '1000px', margin: '0 auto' }}>
        <div style={{
          position: 'relative', background: T.dark,
          aspectRatio: '16 / 9', width: '100%',
          boxShadow: '0 32px 80px rgba(22,33,62,0.18)',
          overflow: 'hidden',
        }}>
          {/* Placeholder — swap src for your real video URL */}
          <video
            ref={videoRef}
            src=""
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: playing ? 'block' : 'none' }}
            controls={playing}
            onEnded={() => setPlaying(false)}
          />

          {/* Play state overlay */}
          {!playing && (
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              background: T.dark,
              backgroundImage: 'repeating-linear-gradient(45deg, rgba(246,247,250,0.02) 0px, rgba(246,247,250,0.02) 1px, transparent 1px, transparent 20px)',
              cursor: 'pointer',
              gap: '24px',
            }} onClick={handlePlay}>
              {/* Logo watermark */}
              <svg viewBox="0 0 480 280" width="80" height="47" style={{ opacity: 0.25 }} xmlns="http://www.w3.org/2000/svg">
                <rect width="480" height="280" fill="transparent"/>
                <text x="240" y="140" textAnchor="middle" fill="#F6F7FA" fontFamily="Cormorant Garamond, Georgia, serif" fontSize="110" fontStyle="italic">M</text>
                <text x="293" y="78" fill="#5B6B8C" fontFamily="Cormorant Garamond, Georgia, serif" fontSize="32">*</text>
              </svg>
              {/* Play button */}
              <div style={{
                width: '72px', height: '72px', borderRadius: '50%',
                border: `2px solid rgba(246,247,250,0.5)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'border-color 0.2s, transform 0.2s',
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = '#5B6B8C'; e.currentTarget.style.transform = 'scale(1.08)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(246,247,250,0.5)'; e.currentTarget.style.transform = 'scale(1)'; }}
              >
                <svg width="22" height="26" viewBox="0 0 22 26" fill="none">
                  <path d="M2 2l18 11L2 24V2z" fill="#F6F7FA" />
                </svg>
              </div>
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px', letterSpacing: '3px', textTransform: 'uppercase', color: 'rgba(246,247,250,0.45)' }}>Play Demo</div>
              {/* Placeholder label */}
              <div style={{
                position: 'absolute', bottom: '24px', right: '24px',
                fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '12px',
                letterSpacing: '2px', textTransform: 'uppercase',
                color: 'rgba(246,247,250,0.25)',
              }}>Video coming soon</div>
            </div>
          )}
        </div>

        {/* Caption */}
        <div style={{ marginTop: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
          <div>
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '20px', color: T.dark }}>Metis Platform Walkthrough</div>
            <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '19px', letterSpacing: '1.5px', textTransform: 'uppercase', color: 'rgba(22,33,62,0.65)', marginTop: '4px' }}>Workers' Compensation · Risk Intelligence</div>
          </div>
          <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px', letterSpacing: '2px', textTransform: 'uppercase', color: T.sage }}>Metis, 2026</div>
        </div>
      </section>

      <Divider />

      {/* What you'll see */}
      <section style={{ padding: '72px 48px', maxWidth: '1000px', margin: '0 auto' }}>
        <Label>What You'll See</Label>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '40px', marginTop: '32px' }}>
          {[
            { num: '01', title: 'Business Lookup', body: 'Enter any business and watch Metis pull authoritative data in seconds.' },
            { num: '02', title: 'Risk Evaluation', body: 'See how our scoring engine surfaces red flags and signals in real time.' },
            { num: '03', title: 'Submission Summary', body: 'Auto-generated packet ready for your carrier conversation.' },
          ].map(item => (
            <div key={item.num} style={{ paddingLeft: '20px', borderLeft: `2px solid ${T.sage}` }}>
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '32px', color: T.sage, lineHeight: 1, marginBottom: '12px' }}>{item.num}</div>
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '20px', color: T.dark, marginBottom: '8px' }}>{item.title}</div>
              <SansBody style={{ fontSize: '18px' }}>{item.body}</SansBody>
            </div>
          ))}
        </div>
      </section>

      <Divider />

      {/* Dark footer CTA */}
      <section style={{ background: T.dark, padding: '72px 48px', textAlign: 'center' }}>
        <Label color={T.sage}>Questions?</Label>
        <EditorialHeading size={48} style={{ color: T.cream, marginBottom: '20px' }}>
          Want to learn more about Metis?
        </EditorialHeading>
        <SansBody style={{ color: 'rgba(246,247,250,0.6)', maxWidth: '440px', margin: '0 auto 36px' }}>
          Reach out directly and we'll walk you through how Metis fits your workflow.
        </SansBody>
        <InlineLightBtn onClick={() => window.__metisNav && window.__metisNav('contact_us')}>Contact Us</InlineLightBtn>
      </section>

    </div>
  );
};

// ─── CONTACT US PAGE ────────────────────────────────────────────────────────

const contactInputStyle = (err) => ({
  width: '100%', padding: '11px 0', background: 'transparent',
  border: 'none', borderBottom: `1px solid ${err ? T.accent : 'rgba(22,33,62,0.2)'}`,
  fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '19px', color: T.dark,
  outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s',
});

const InquiryField = ({ label, id, type, form, setForm, errors, setErrors, children }) => (
  <div style={{ marginBottom: '28px' }}>
    <label style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px', letterSpacing: '2.5px', textTransform: 'uppercase', color: errors[id] ? T.accent : 'rgba(22,33,62,0.7)', display: 'block', marginBottom: '6px' }}>
      {label}{errors[id] ? ` — ${errors[id]}` : ''}
    </label>
    {children || (
      <input type={type || 'text'} value={form[id]}
        onChange={e => { setForm(f => ({ ...f, [id]: e.target.value })); setErrors(err => ({ ...err, [id]: null })); }}
        style={contactInputStyle(errors[id])}
        onFocus={e => e.target.style.borderBottomColor = T.dark}
        onBlur={e => e.target.style.borderBottomColor = errors[id] ? T.accent : 'rgba(22,33,62,0.2)'}
      />
    )}
  </div>
);

const CONTACT_INQUIRY_URL = 'https://metisinsured.com/contact-inquiry';

const ContactUsPage = () => {
  const [inquiryType, setInquiryType] = React.useState('');
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', business: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');
  const [errors, setErrors] = React.useState({});

  const teamContacts = [
    { name: 'Lachlan Van Rosmalen', title: 'Founder & CEO', email: 'Lachlan@metisinsured.com', phone: '(213) 572-9852' },
    { name: 'John Rosmalen', title: 'Partner', email: 'Johnrosmalen@imacoinsurance.com', phone: '(213) 239-3825' },
  ];

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.phone.trim()) e.phone = 'Required';
    if (!form.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) e.email = 'Valid email required';
    if (!form.business.trim()) e.business = 'Required';
    return e;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }

    setSubmitting(true);
    setSubmitError('');
    try {
      const res = await fetch(CONTACT_INQUIRY_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('Request failed');
      setSubmitted(true);
    } catch (err) {
      setSubmitError("Something went wrong sending this — please email us directly instead, or try again in a moment.");
    } finally {
      setSubmitting(false);
    }
  };

  const fieldProps = { form, setForm, errors, setErrors };

  return (
    <div style={{ background: T.cream, paddingTop: '80px', minHeight: '100vh' }}>

      {/* Header */}
      <section style={{ padding: '72px 48px 56px', borderBottom: '1px solid rgba(22,33,62,0.1)' }}>
        <Label>Get In Touch</Label>
        <EditorialHeading size={64}>Contact Us</EditorialHeading>
      </section>

      {/* Two-column body */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '70vh' }}>

        {/* LEFT — Team Contacts */}
        <div style={{ padding: '64px 56px', borderRight: '1px solid rgba(22,33,62,0.1)' }}>
          <Label>Direct Contacts</Label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
            {teamContacts.map((c, i) => (
              <div key={c.name + i} style={{ paddingTop: '36px', paddingBottom: '36px', borderBottom: '1px solid rgba(22,33,62,0.08)' }}>
                <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontStyle: 'italic', fontSize: '22px', color: T.dark, marginBottom: '4px' }}>{c.name}</div>
                <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px', letterSpacing: '2px', textTransform: 'uppercase', color: T.accent, marginBottom: '16px' }}>{c.title}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                  <a href={`mailto:${c.email}`} style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '18px', color: 'rgba(22,33,62,0.8)', textDecoration: 'none', transition: 'color 0.2s' }}
                    onMouseEnter={e => e.target.style.color = T.accent}
                    onMouseLeave={e => e.target.style.color = 'rgba(22,33,62,0.8)'}>
                    {c.email}
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT — Inquiry Form */}
        <div style={{ padding: '64px 56px' }}>
          <Label>Make an Inquiry</Label>
          {submitted ? (
            <div style={{ paddingTop: '40px' }}>
              <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '40px', color: T.sage, marginBottom: '12px' }}>*</div>
              <EditorialHeading size={36} style={{ marginBottom: '16px' }}>Thank you, {form.name.split(' ')[0]}.</EditorialHeading>
              <SansBody>We've received your inquiry and will be in touch shortly.</SansBody>
            </div>
          ) : (
            <form onSubmit={handleSubmit} noValidate>
              <InquiryField label="Full Name" id="name" {...fieldProps} />
              <InquiryField label="Phone Number" id="phone" type="tel" {...fieldProps} />
              <InquiryField label="Email Address" id="email" type="email" {...fieldProps} />
              <InquiryField label="Organization Name" id="business" {...fieldProps} />

              {submitError && (
                <div style={{ fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '16px', color: '#b91c1c', marginBottom: '16px' }}>
                  {submitError}
                </div>
              )}
              <button type="submit" disabled={submitting} style={{
                fontFamily: "Cormorant Garamond, Georgia, serif", fontSize: '19px', letterSpacing: '2.5px',
                textTransform: 'uppercase', background: T.accent, color: T.cream,
                border: 'none', padding: '14px 40px', cursor: submitting ? 'default' : 'pointer', marginTop: '8px',
                opacity: submitting ? 0.6 : 1,
                transition: 'background 0.2s, transform 0.2s, box-shadow 0.2s',
              }}
                onMouseEnter={e => { if (!submitting) { e.target.style.background = '#164a97'; e.target.style.transform = 'translateY(-3px)'; e.target.style.boxShadow = '0 8px 24px rgba(31,95,191,0.3)'; } }}
                onMouseLeave={e => { e.target.style.background = T.accent; e.target.style.transform = 'translateY(0)'; e.target.style.boxShadow = 'none'; }}
              >{submitting ? 'Sending…' : 'Send Inquiry'}</button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { HomeEditorial, HomeSplit, AboutPage, SolutionsPage, ContactPage, ContactUsPage, InlineLightBtn, CustomSelect });
