// site-sections-2.jsx — bottom half of Liam & Rich homepage.

function HowItWorks({ display, body, mono }) {
  const { isMobile, isTablet } = useResponsive();
  const steps = [
    { n: '01', t: 'Send the messy records', d: 'Email the subcontract, forward the messages, send screenshots, photos, drawings, RFIs and notes. It does not need to be tidy.' },
    { n: '02', t: 'We structure the evidence', d: 'We build a chronology, contract clause map, notice deadline checklist and source-linked evidence register.' },
    { n: '03', t: 'You review and decide', d: 'You get a draft claim pack to review internally, then choose whether and how to submit it.' },
  ];
  return (
    <section id="how-it-works" style={{ background: LR.sand, padding: isMobile ? '72px 20px' : isTablet ? '88px 32px' : '120px 48px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: isMobile ? 40 : 64, maxWidth: 720 }}>
          <SectionLabel mono={mono}>How it works</SectionLabel>
          <h2 style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 40 : 64, lineHeight: 0.95, letterSpacing: '-0.03em', color: LR.navy, margin: 0, textTransform: 'uppercase' }}>
            Three steps to a<br />claim-ready pack.
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile || isTablet ? '1fr' : 'repeat(3, 1fr)',
          gap: 0,
          borderTop: `1px solid ${LR.navy}`,
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              padding: isMobile ? '32px 0 36px' : '40px 32px 48px',
              borderRight: !isMobile && !isTablet && i < 2 ? `1px solid ${LR.navy}33` : 'none',
              borderBottom: `1px solid ${LR.navy}`,
            }}>
              <div style={{ fontFamily: mono, fontSize: 13, color: LR.rust, fontWeight: 600, letterSpacing: 1.5, marginBottom: 28 }}>
                STEP / {s.n}
              </div>
              <h3 style={{ fontFamily: display, fontWeight: 700, fontSize: 32, lineHeight: 1.05, letterSpacing: '-0.02em', color: LR.navy, margin: 0, marginBottom: 18, textTransform: 'uppercase' }}>
                {s.t}
              </h3>
              <p style={{ fontFamily: body, fontSize: 16, lineHeight: 1.55, color: LR.iron, margin: 0 }}>
                {s.d}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhatWeClaim({ display, body, mono }) {
  const { isMobile, isTablet } = useResponsive();
  const items = [
    { t: 'Scope changes', d: 'Extra works where the subcontract scope changed mid-project.' },
    { t: 'Design revisions', d: 'Updated drawings and engineer directions that altered install work.' },
    { t: 'Delay events', d: 'Access issues, out-of-sequence works and programme knock-ons.' },
    { t: 'Cost build-up', d: 'Labour, plant and material records that need orderly support.' },
    { t: 'Notice timelines', d: 'Contract notice windows that are easy to miss without structure.' },
    { t: 'Instruction trail', d: 'Emails, chats and site notes that need one reconciled chronology.' },
    { t: 'Document gaps', d: 'Missing attachments and weak points identified before submission.' },
    { t: 'Submission pack', d: 'A draft narrative with linked sources for internal review.' },
  ];
  return (
    <section id="what-we-claim" style={{ background: LR.sandLight, padding: isMobile ? '72px 20px' : isTablet ? '88px 32px' : '120px 48px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: isMobile ? 40 : 56, maxWidth: 720 }}>
          <SectionLabel mono={mono}>Where we help most</SectionLabel>
          <h2 style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 40 : 64, lineHeight: 0.95, letterSpacing: '-0.03em', color: LR.navy, margin: 0, textTransform: 'uppercase' }}>
            Disputed variations and delays where the paperwork is scattered.
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: 0,
        }}>
          {items.map((c, i) => (
            <div key={i} style={{
              padding: isMobile ? '28px 0 30px' : '32px 28px 36px',
              background: LR.sand,
              borderTop: `1px solid ${LR.concrete}`,
              borderRight: !isMobile && ((isTablet && (i + 1) % 2 !== 0) || (!isTablet && (i + 1) % 4 !== 0)) ? `1px solid ${LR.concrete}` : 'none',
              borderBottom: i >= items.length - (isMobile ? 1 : isTablet ? 2 : 4) ? `1px solid ${LR.concrete}` : 'none',
              borderLeft: !isMobile && (isTablet ? i % 2 === 0 : i % 4 === 0) ? `1px solid ${LR.concrete}` : 'none',
            }}>
              <div style={{ fontFamily: mono, fontSize: 11, color: LR.rust, fontWeight: 600, letterSpacing: 1.4, marginBottom: 14 }}>
                0{i + 1}
              </div>
              <h3 style={{ fontFamily: display, fontWeight: 700, fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.02em', color: LR.navy, margin: 0, marginBottom: 10, textTransform: 'uppercase' }}>
                {c.t}
              </h3>
              <p style={{ fontFamily: body, fontSize: 14, lineHeight: 1.5, color: LR.iron, margin: 0 }}>
                {c.d}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ display, body, mono }) {
  const { isMobile, isTablet } = useResponsive();
  return (
    <section id="pricing" style={{ background: LR.navy, color: LR.sand, padding: isMobile ? '72px 20px' : isTablet ? '88px 32px' : '120px 48px' }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', display: 'grid',
        gridTemplateColumns: isMobile || isTablet ? '1fr' : '1fr 1.3fr',
        gap: isMobile ? 40 : 80,
        alignItems: 'center',
      }}>
        <div>
          <SectionLabel mono={mono} color={LR.rust}>Pricing</SectionLabel>
          <h2 style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 44 : 64, lineHeight: 0.95, letterSpacing: '-0.03em', color: LR.sand, margin: 0, textTransform: 'uppercase' }}>
            No win.<br /><span style={{ color: LR.rust }}>No pay.</span>
          </h2>
          <p style={{ fontFamily: body, fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: `${LR.sand}cc`, marginTop: 28, maxWidth: 460 }}>
            No upfront fee. Our fee is a percentage of the amount recovered,
            agreed before we start, and only payable if the claim gets paid.
          </p>
        </div>

        <div style={{
          background: LR.sand, color: LR.navy, padding: isMobile ? '32px 24px 28px' : '40px 42px 38px', borderRadius: 4,
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', top: -1, right: -1,
            background: LR.rust, color: LR.navy, padding: '8px 14px',
            fontFamily: mono, fontSize: 11, letterSpacing: 1.4, fontWeight: 700, textTransform: 'uppercase', borderRadius: 2,
          }}>De-risked</div>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: 1.8, color: LR.iron, fontWeight: 600, textTransform: 'uppercase', marginBottom: 14 }}>
            Success percentage
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
            gap: isMobile ? 22 : 28,
            alignItems: 'end',
            marginBottom: 22,
          }}>
            <div>
              <div style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 58 : 80, lineHeight: 0.85, letterSpacing: '-0.04em', color: LR.navy, marginBottom: 8 }}>
                $0<span style={{ color: LR.rust }}> upfront</span>
              </div>
            </div>
            <div style={{
              borderLeft: isMobile ? 'none' : `1px solid ${LR.navy}22`,
              borderTop: isMobile ? `1px solid ${LR.navy}22` : 'none',
              paddingLeft: isMobile ? 0 : 28,
              paddingTop: isMobile ? 20 : 0,
            }}>
              <div style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 58 : 72, lineHeight: 0.85, letterSpacing: '-0.04em', color: LR.navy, marginBottom: 8 }}>
                15<span style={{ color: LR.rust }}>%</span>
              </div>
              <div style={{ fontFamily: body, fontSize: 15, color: LR.iron, fontWeight: 500 }}>of money recovered</div>
            </div>
          </div>
          <div style={{ fontFamily: body, fontSize: 14, color: LR.iron, marginBottom: 28, lineHeight: 1.5 }}>
            If the claim is paid, our fee is taken from the amount recovered. If nothing is recovered, you do not pay us.
          </div>
          <div style={{ height: 1, background: `${LR.navy}22`, marginBottom: 24 }}></div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Evidence map with links to source documents',
              'Notice and deadline checklist from your subcontract',
              'Draft narrative and annexure structure for review',
              'Gap list showing what is still missing',
              'Percentage fee agreed before work starts',
            ].map((f, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontFamily: body, fontSize: 15, color: LR.navy }}>
                <span style={{ color: LR.rust, fontWeight: 700, marginTop: 2 }}>✓</span>{f}
              </li>
            ))}
          </ul>
          <a href="#claim-review" style={{
            display: 'block', marginTop: 32, padding: '18px 28px', background: LR.navy, color: LR.sand,
            fontFamily: body, fontSize: 14, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase',
            textDecoration: 'none', textAlign: 'center', borderRadius: 2,
          }}>Start a claim pack →</a>
        </div>
      </div>
    </section>
  );
}

function Testimonials({ display, body, mono }) {
  const { isMobile, isTablet } = useResponsive();
  const outputs = [
    {
      t: 'Chronology by date',
      d: 'Single timeline from emails, RFIs, drawings, site notes and messages so events are easy to follow.',
      tag: 'Who said what, when',
    },
    {
      t: 'Clause and deadline map',
      d: 'Contract notice triggers and timing windows pulled into a checklist before they slip.',
      tag: 'Notice risk visibility',
    },
    {
      t: 'Draft claim pack',
      d: 'Draft narrative with linked source references plus a list of missing documents to complete.',
      tag: 'Submission-ready structure',
    },
  ];
  return (
    <section id="stories" style={{ background: LR.sandLight, padding: isMobile ? '72px 20px' : isTablet ? '88px 32px' : '120px 48px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: isMobile ? 40 : 56, maxWidth: 720 }}>
          <SectionLabel mono={mono}>What you get</SectionLabel>
          <h2 style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 40 : 64, lineHeight: 0.95, letterSpacing: '-0.03em', color: LR.navy, margin: 0, textTransform: 'uppercase' }}>
            Clear outputs, even before you have an internal contracts team.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile || isTablet ? '1fr' : 'repeat(3, 1fr)', gap: 24 }}>
          {outputs.map((o, i) => (
            <div key={i} style={{
              background: LR.sand, padding: '36px 32px 30px', borderTop: `3px solid ${LR.rust}`,
              display: 'flex', flexDirection: 'column', gap: 24,
            }}>
              <div style={{ fontFamily: mono, fontSize: 11, color: LR.rust, letterSpacing: 1.5, textTransform: 'uppercase', fontWeight: 700 }}>
                Output {i + 1}
              </div>
              <p style={{ fontFamily: body, fontSize: 16, lineHeight: 1.55, color: LR.navy, margin: 0, flex: 1 }}>
                {o.d}
              </p>
              <div style={{ borderTop: `1px solid ${LR.concrete}`, paddingTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div>
                  <div style={{ fontFamily: display, fontWeight: 700, fontSize: 16, color: LR.navy, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{o.t}</div>
                </div>
                <div style={{
                  fontFamily: mono, fontSize: 11, color: LR.rust, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase',
                  border: `1px solid ${LR.rust}66`, padding: '4px 8px', borderRadius: 2,
                }}>{o.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ({ display, body, mono }) {
  const { isMobile } = useResponsive();
  const faqs = [
    { q: 'Are you a law firm?', a: 'No. Liam & Rich is not a law firm and does not provide legal advice. We help organise documents and draft claim materials for your review.' },
    { q: 'Do you decide whether we are entitled?', a: 'No. Your business decides what to submit and stands behind the final claim. We focus on evidence organisation and traceable draft materials.' },
    { q: 'What files do we need to provide?', a: 'Usually the subcontract, drawings, RFIs, emails, site diaries, dayworks, timesheets, photos and payment correspondence. Messy is fine: forwards, screenshots and partial folders are normal.' },
    { q: 'What happens to our data?', a: 'We only use your project documents to produce your claim pack. We can provide copies of the working pack and remove files on request.' },
    { q: 'What does it cost?', a: 'There is no upfront fee. Our fee is a percentage of the amount recovered, agreed before starting, and only payable if the claim gets paid.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ background: LR.sand, padding: isMobile ? '72px 20px' : '120px 48px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: isMobile ? 40 : 56, textAlign: 'center' }}>
          <SectionLabel mono={mono}>Frequently asked</SectionLabel>
          <h2 style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 40 : 64, lineHeight: 0.95, letterSpacing: '-0.03em', color: LR.navy, margin: 0, textTransform: 'uppercase' }}>
            Questions before<br />you send the files.
          </h2>
        </div>
        <div style={{ borderTop: `1px solid ${LR.navy}66` }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${LR.navy}66` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '24px 0', background: 'none', border: 'none', cursor: 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left',
                fontFamily: display, fontWeight: 700, fontSize: isMobile ? 18 : 22, color: LR.navy, letterSpacing: '-0.02em',
                textTransform: 'uppercase',
              }}>
                <span>{f.q}</span>
                <span style={{ color: LR.rust, fontSize: 28, fontFamily: body, fontWeight: 400, lineHeight: 1, flexShrink: 0, marginLeft: 24 }}>
                  {open === i ? '–' : '+'}
                </span>
              </button>
              {open === i && (
                <div style={{ padding: '0 0 28px', maxWidth: 800 }}>
                  <p style={{ fontFamily: body, fontSize: 16, lineHeight: 1.6, color: LR.iron, margin: 0 }}>
                    {f.a}
                  </p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ display, body, mono }) {
  const { isMobile, isTablet } = useResponsive();
  return (
    <section id="claim-review" style={{
      background: LR.navy, color: LR.sand,
      padding: isMobile ? '72px 20px' : isTablet ? '88px 32px' : '120px 48px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${LR.sand}10 1px, transparent 1px), linear-gradient(90deg, ${LR.sand}10 1px, transparent 1px)`,
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(circle at 50% 50%, black 30%, transparent 80%)',
        pointerEvents: 'none',
      }}></div>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <SectionLabel mono={mono} color={LR.rust}>Start a claim pack</SectionLabel>
        <h2 style={{ fontFamily: display, fontWeight: 700, fontSize: isMobile ? 44 : 88, lineHeight: 0.95, letterSpacing: '-0.04em', color: LR.sand, margin: 0, textTransform: 'uppercase', textWrap: 'balance' }}>
          Got a variation<br />sitting in messy files?
        </h2>
        <p style={{ fontFamily: body, fontSize: isMobile ? 17 : 20, lineHeight: 1.5, color: `${LR.sand}cc`, marginTop: 28, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
          Send through whatever you have: emails, screenshots, photos, drawings, diaries and notes.
          We organise it into a claim-ready evidence pack your team can review.
        </p>

        <div style={{
          background: LR.sand, padding: isMobile ? '28px 20px 24px' : '36px 36px 32px', marginTop: isMobile ? 40 : 56,
          maxWidth: 760, marginLeft: 'auto', marginRight: 'auto',
          textAlign: 'left', borderRadius: 4,
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16, marginBottom: 16 }}>
            {[['Your name', 'Alex Morgan'], ['Company', 'BrightFlow Mechanical Pty Ltd']].map(([l, p], i) => (
              <div key={i}>
                <label style={{ fontFamily: mono, fontSize: 10, color: LR.iron, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>{l}</label>
                <input placeholder={p} style={{
                  width: '100%', marginTop: 6, padding: '12px 14px', border: `1px solid ${LR.concrete}`, background: '#fff',
                  fontFamily: body, fontSize: 15, color: LR.navy, borderRadius: 2, outline: 'none',
                  boxSizing: 'border-box',
                }} />
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr 1fr', gap: 16, marginBottom: 16 }}>
            {[['Trade', 'Mechanical / HVAC'], ['Location', 'Victoria'], ['Claim size', 'Estimated amount']].map(([l, p], i) => (
              <div key={i}>
                <label style={{ fontFamily: mono, fontSize: 10, color: LR.iron, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>{l}</label>
                <input placeholder={p} style={{
                  width: '100%', marginTop: 6, padding: '12px 14px', border: `1px solid ${LR.concrete}`, background: '#fff',
                  fontFamily: body, fontSize: 15, color: LR.navy, borderRadius: 2, outline: 'none',
                  boxSizing: 'border-box',
                }} />
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16, marginBottom: 16 }}>
            {[['Project type', 'Commercial fitout'], ['Deadline date', 'DD/MM/YYYY']].map(([l, p], i) => (
              <div key={i}>
                <label style={{ fontFamily: mono, fontSize: 10, color: LR.iron, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>{l}</label>
                <input placeholder={p} style={{
                  width: '100%', marginTop: 6, padding: '12px 14px', border: `1px solid ${LR.concrete}`, background: '#fff',
                  fontFamily: body, fontSize: 15, color: LR.navy, borderRadius: 2, outline: 'none',
                  boxSizing: 'border-box',
                }} />
              </div>
            ))}
          </div>
          <div style={{ marginBottom: 16 }}>
            <label style={{ fontFamily: mono, fontSize: 10, color: LR.iron, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>Project summary</label>
            <textarea rows="3" placeholder="Describe the disputed variation or delay, what records you have, and any upcoming notice deadline." style={{
              width: '100%', marginTop: 6, padding: '12px 14px', border: `1px solid ${LR.concrete}`, background: '#fff',
              fontFamily: body, fontSize: 14, color: LR.navy, borderRadius: 2, outline: 'none', resize: 'vertical', boxSizing: 'border-box',
            }} />
          </div>
          <button style={{
            width: '100%', padding: '18px', background: LR.navy, color: LR.sand, border: 'none',
            fontFamily: body, fontSize: 14, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase',
            cursor: 'pointer', borderRadius: 2,
          }}>Send my variation details →</button>
          <div style={{ fontFamily: mono, fontSize: 10, color: LR.iron, letterSpacing: 0.6, marginTop: 14, textAlign: 'center' }}>
            No upfront fee · Percentage of money recovered if the claim gets paid · Not legal advice
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ display, body, mono }) {
  const { isMobile, isTablet } = useResponsive();
  return (
    <footer style={{ background: LR.navyDeep, color: `${LR.sand}99`, padding: isMobile ? '48px 20px 28px' : '64px 48px 36px', borderTop: `1px solid ${LR.rust}33` }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '2fr 1fr 1fr 1fr',
        gap: isMobile ? 36 : 56,
        marginBottom: isMobile ? 40 : 56,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <NavLogomark size={42} />
            <Wordmark display={display} size={20} weight={700} color={LR.sand} />
          </div>
          <p style={{ fontFamily: body, fontSize: 14, lineHeight: 1.55, maxWidth: 320, margin: 0 }}>
            We help subcontractors organise project records into evidence packs and draft claim materials.
            We are not a law firm and do not provide legal advice.
          </p>
        </div>
        {[
          { h: 'Product', l: ['How it works', 'What we claim', 'Pricing', 'Stories'] },
          { h: 'Company', l: ['About', 'Careers', 'Contact', 'Press'] },
          { h: 'Legal', l: ['Terms', 'Privacy', 'Security', 'SOP Act guide'] },
        ].map((c, i) => (
          <div key={i}>
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: 1.8, color: LR.rust, fontWeight: 600, textTransform: 'uppercase', marginBottom: 18 }}>
              {c.h}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.l.map((x) => (
                <li key={x}><a href="#" style={{ color: `${LR.sand}cc`, textDecoration: 'none', fontFamily: body, fontSize: 14 }}>{x}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{
        borderTop: `1px solid ${LR.sand}22`, paddingTop: 24, display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 10 : 0,
        justifyContent: 'space-between', fontFamily: mono, fontSize: 11, letterSpacing: 0.6,
      }}>
        <span>© 2026 Liam &amp; Rich</span>
        <span>Made on site · Brisbane / Sydney / Melbourne</span>
      </div>
    </footer>
  );
}

Object.assign(window, { HowItWorks, WhatWeClaim, Pricing, Testimonials, FAQ, FinalCTA, Footer });