// Direction C — "Parcel"
// Blend: Direction A's airy, readable clean utility feel + Direction B's warmth,
// rounded buttons, and serif display — but with wider Fraunces italic (no narrow
// Instrument Serif) and a cheerful accent (tweakable).

// Build a palette from an accent hex + optional overrides. Called at render
// time so the tweaks panel can re-theme the page live.
function makeC(overrides) {
  const accent = (overrides && overrides.accent) || '#1f8f6e';
  // crude hex → rgb for the 10% soft variant
  const hx = accent.replace('#','');
  const r = parseInt(hx.slice(0,2),16), g = parseInt(hx.slice(2,4),16), b = parseInt(hx.slice(4,6),16);
  const accentSoft = `rgba(${r},${g},${b},0.10)`;
  const accentBright = accent;
  return Object.assign({
    paper: '#f8f5ee',
    paperAlt: '#f1ecdf',
    ink: '#1a1a1f',
    muted: '#6e6a62',
    line: 'rgba(26,26,31,0.10)',
    lineSoft: 'rgba(26,26,31,0.06)',
    accent,
    accentSoft,
    accentBright,
    card: '#ffffff',
    mono: "'JetBrains Mono', ui-monospace, monospace",
    sans: "'Inter', -apple-system, system-ui, sans-serif",
    serif: "'Fraunces', Georgia, serif",
  }, overrides || {});
}

// Default palette (used when no theme prop is passed).
let C = makeC();

function makeCStyles(C) {
  return {
    page: {
      width: '100%',
      minHeight: '100%',
      background: C.paper,
      color: C.ink,
      fontFamily: C.sans,
      fontSize: 15,
      lineHeight: 1.55,
      WebkitFontSmoothing: 'antialiased',
    },
    container: {
      maxWidth: 1120,
      margin: '0 auto',
      padding: '0 56px',
    },
    mono: {
      fontFamily: C.mono,
      fontSize: 11,
      letterSpacing: '0.1em',
      textTransform: 'uppercase',
      color: C.muted,
    },
    italic: {
      fontFamily: C.serif,
      fontStyle: 'italic',
      fontWeight: 400,
      fontVariationSettings: '"SOFT" 100, "WONK" 1',
    },
  };
}

let cStyles = makeCStyles(C);

function CPill({ children, primary, onDark }) {
  const s = primary ? {
    background: C.accent,
    color: '#fff',
    border: `1px solid ${C.accent}`,
  } : onDark ? {
    background: 'transparent',
    color: C.paper,
    border: `1px solid rgba(248,245,238,0.25)`,
  } : {
    background: 'transparent',
    color: C.ink,
    border: `1px solid ${C.line}`,
  };
  return (
    <a href="#" style={{
      ...s,
      padding: '12px 22px',
      borderRadius: 999,
      fontSize: 14,
      fontWeight: 500,
      textDecoration: 'none',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
    }}>{children}</a>
  );
}

function CNav() {
  return (
    <div style={{ padding: '20px 0', borderBottom: `1px solid ${C.lineSoft}` }}>
      <div style={{ ...cStyles.container, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <div style={{
            fontFamily: C.serif,
            fontWeight: 500,
            fontSize: 21,
            letterSpacing: '-0.015em',
          }}>Qixeo <span style={cStyles.italic}>Invoice</span></div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 30, fontSize: 14, color: C.muted }}>
          <a href="#how" style={{ color: 'inherit', textDecoration: 'none' }}>How it works</a>
          <a href="#merchants" style={{ color: 'inherit', textDecoration: 'none' }}>Who it's for</a>
          <a href="#pricing" style={{ color: 'inherit', textDecoration: 'none' }}>Pricing</a>
          <CPill primary>Install on Shopify →</CPill>
        </div>
      </div>
    </div>
  );
}

function CHero() {
  return (
    <section style={{ padding: '88px 0 72px' }}>
      <div style={cStyles.container}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
          <div style={{ width: 6, height: 6, borderRadius: '50%', background: C.accent }} />
          <div style={cStyles.mono}>For merchants who ship orders in parts</div>
        </div>

        <h1 style={{
          fontFamily: C.serif,
          fontSize: 72,
          lineHeight: 1.04,
          letterSpacing: '-0.028em',
          fontWeight: 400,
          margin: '0 0 40px',
          maxWidth: 960,
          textWrap: 'balance',
          paddingBottom: 4,
        }}>
          An invoice for every <span style={{ ...cStyles.italic, color: C.accent }}>shipment</span> —
          not just every order.
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'start' }}>
          <p style={{
            fontSize: 19,
            lineHeight: 1.55,
            color: C.muted,
            maxWidth: 580,
            margin: 0,
          }}>
            Qixeo generates a clean, reconciled invoice for each partial fulfillment in Shopify —
            with taxes, discounts, and shipping proportionally split.{' '}
            <span style={{ ...cStyles.italic, color: C.ink }}>Penny-accurate, every time.</span>
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start', paddingTop: 4 }}>
            <CPill primary>Install on Shopify</CPill>
            <a href="#how" style={{
              color: C.ink, fontSize: 14, textDecoration: 'none',
              borderBottom: `1px solid ${C.line}`, paddingBottom: 2,
            }}>See how it works →</a>
          </div>
        </div>

        <div style={{ marginTop: 72, position: 'relative' }}>
          <div style={{ ...cStyles.mono, position: 'absolute', left: 0, top: -22 }}>
            <span style={{ ...cStyles.italic, fontStyle: 'italic', textTransform: 'none', letterSpacing: 0, fontSize: 14, color: C.ink }}>
              fig. 01 —
            </span>{' '}
            one order, reconciled across three shipments
          </div>
          <ShipmentDiagram theme={{
            ink: C.ink, muted: C.muted, accent: C.accent, accentSoft: C.accentSoft,
            paper: C.card, line: C.line, bg: '#ffffff',
            radius: 10, mono: C.mono, display: C.sans,
            border: `1px solid ${C.line}`,
            shadow: '0 1px 0 rgba(0,0,0,0.02), 0 10px 30px -20px rgba(26,26,31,0.18)',
            warnColor: C.accent,
          }} />
        </div>
      </div>
    </section>
  );
}

function CHowItWorks() {
  const steps = [
    { n: '01', title: 'Install.', body: 'Add Qixeo Invoice from the Shopify App Store. Takes under a minute.' },
    { n: '02', title: 'Ship.',    body: 'Fulfill orders the way you already do. Partial shipments welcome.' },
    { n: '03', title: 'Done.',    body: 'Qixeo generates an invoice for each shipment and emails it to your customer automatically.' },
  ];
  return (
    <section id="how" style={{ padding: '96px 0', borderTop: `1px solid ${C.lineSoft}`, borderBottom: `1px solid ${C.lineSoft}` }}>
      <div style={cStyles.container}>
        <div style={cStyles.mono}>§ How it works</div>
        <h2 style={{
          fontFamily: C.serif,
          fontSize: 46,
          lineHeight: 1.04,
          letterSpacing: '-0.025em',
          fontWeight: 400,
          margin: '14px 0 0',
          maxWidth: 780,
          textWrap: 'balance',
        }}>
          One install. Three steps. <span style={{ ...cStyles.italic, color: C.accent }}>Zero</span> manual reconciliation.
        </h2>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, marginTop: 56 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              background: C.card,
              border: `1px solid ${C.line}`,
              borderRadius: 14,
              padding: '28px 26px',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <div style={{
                  fontFamily: C.mono,
                  fontSize: 11,
                  color: C.accent,
                  background: C.accentSoft,
                  padding: '4px 8px',
                  borderRadius: 999,
                  letterSpacing: '0.06em',
                }}>{s.n}</div>
                <div style={{ height: 1, flex: 1, background: C.lineSoft }} />
              </div>
              <div style={{
                fontFamily: C.serif,
                fontSize: 24,
                fontWeight: 500,
                letterSpacing: '-0.01em',
                marginBottom: 10,
              }}>{s.title}</div>
              <div style={{ color: C.muted, fontSize: 15, lineHeight: 1.55 }}>{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CBuiltFor() {
  const rows = [
    { tag: 'apparel',    title: 'Apparel & multi-SKU retail', body: 'Backorders and partial picks are routine.' },
    { tag: 'furniture',  title: 'Furniture & homewares',      body: 'Large orders rarely ship as one package.' },
    { tag: 'b2b',        title: 'B2B & wholesale',            body: 'Buyers need reconciled invoices that match each delivery.' },
    { tag: 'eu',         title: 'EU merchants',               body: 'Regulated e-invoicing support out of the box.' },
    { tag: 'support',    title: 'Support-weary stores',       body: '"Your invoice covers the whole order, not just this box" — one time too many.' },
  ];
  return (
    <section id="merchants" style={{ padding: '96px 0' }}>
      <div style={cStyles.container}>
        <div style={cStyles.mono}>§ Built for</div>
        <h2 style={{
          fontFamily: C.serif,
          fontSize: 46,
          lineHeight: 1.04,
          letterSpacing: '-0.025em',
          fontWeight: 400,
          margin: '14px 0 0',
          maxWidth: 720,
        }}>
          Merchants who ship <span style={cStyles.italic}>in parts.</span>
        </h2>

        <div style={{ marginTop: 44, borderTop: `1px solid ${C.line}` }}>
          {rows.map((r) => (
            <div key={r.tag} style={{
              display: 'grid',
              gridTemplateColumns: '140px 1fr 2fr',
              gap: 32,
              padding: '24px 0',
              borderBottom: `1px solid ${C.line}`,
              alignItems: 'baseline',
            }}>
              <div style={{ ...cStyles.mono, color: C.accent }}>{r.tag}</div>
              <div style={{
                fontFamily: C.serif,
                fontSize: 20, fontWeight: 500, letterSpacing: '-0.005em',
              }}>{r.title}</div>
              <div style={{ color: C.muted, fontSize: 15 }}>{r.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CPricing() {
  const tiers = [
    { name: 'Free',   price: '$0',  unit: 'up to 50 invoices / mo', cta: 'Install free' },
    { name: 'Growth', price: '$19', unit: 'unlimited invoices',      cta: 'Start Growth', highlight: true },
    { name: 'Pro',    price: '$49', unit: 'everything, unlocked',    cta: 'Start Pro' },
  ];

  const features = [
    { section: 'Core',
      rows: [
        ['Per-shipment invoices',         true, true, true],
        ['Penny-accurate reconciliation', true, true, true],
        ['Customer status page',          true, true, true],
        ['Dashboard + audit trail',       true, true, true],
        ['Packing slips, credit notes',   true, true, true],
        ['4 starter templates + editor',  true, true, true],
      ]
    },
    { section: 'Automation',
      rows: [
        ['Auto-send on fulfillment',          false, true, true],
        ['Batching & bulk actions',           false, true, true],
        ['Shopify Flow triggers',             false, true, true],
        ['CSV export',                        false, true, true],
        ['B2B payment terms (net 15–90)',     false, true, true],
      ]
    },
    { section: 'Pro',
      rows: [
        ['White-label branding',                   false, false, true],
        ['EU e-invoicing (PEPPOL, XRechnung, Factur-X)', false, false, true],
        ['Cloud storage (Drive, SFTP)',            false, false, true],
        ['Scheduled batch invoicing',              false, false, true],
        ['Storefront downloads',                   false, false, true],
      ]
    }
  ];

  const Check = ({ on, highlight }) => on ? (
    <span style={{
      display: 'inline-block', width: 18, height: 18, borderRadius: '50%',
      background: highlight ? C.accent : C.ink,
      position: 'relative', verticalAlign: 'middle',
    }}>
      <span style={{
        position: 'absolute', inset: 0, display: 'flex',
        alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontSize: 11, fontWeight: 700, lineHeight: 1,
      }}>✓</span>
    </span>
  ) : (
    <span style={{ color: 'rgba(26,26,31,0.22)', fontFamily: C.mono, fontSize: 13 }}>—</span>
  );

  return (
    <section id="pricing" style={{ padding: '96px 0', background: C.paperAlt, borderTop: `1px solid ${C.lineSoft}`, borderBottom: `1px solid ${C.lineSoft}` }}>
      <div style={cStyles.container}>
        <div style={cStyles.mono}>§ Pricing</div>
        <h2 style={{
          fontFamily: C.serif,
          fontSize: 46,
          lineHeight: 1.04,
          letterSpacing: '-0.025em',
          fontWeight: 400,
          margin: '14px 0 44px',
        }}>
          Start free. <span style={cStyles.italic}>Scale as you ship.</span>
        </h2>

        <div style={{
          background: C.card,
          border: `1px solid ${C.line}`,
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '2fr 1fr 1fr 1fr',
            borderBottom: `1px solid ${C.line}`,
          }}>
            <div style={{ padding: '26px 26px 22px', ...cStyles.mono, alignSelf: 'end' }}>Plan</div>
            {tiers.map((t) => (
              <div key={t.name} style={{
                padding: '26px 22px 22px',
                borderLeft: `1px solid ${C.line}`,
                background: t.highlight ? C.accentSoft : 'transparent',
              }}>
                <div style={{
                  fontFamily: C.serif, fontSize: 20, fontWeight: 500,
                  color: t.highlight ? C.accent : C.ink,
                  letterSpacing: '-0.01em',
                }}>{t.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 8 }}>
                  <div style={{ fontFamily: C.serif, fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em' }}>{t.price}</div>
                  <div style={{ color: C.muted, fontSize: 13 }}>/mo</div>
                </div>
                <div style={{ ...cStyles.mono, fontSize: 10, marginTop: 8 }}>{t.unit}</div>
              </div>
            ))}
          </div>

          {features.map((sec) => (
            <div key={sec.section}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '2fr 1fr 1fr 1fr',
                background: C.paper,
                borderBottom: `1px solid ${C.lineSoft}`,
              }}>
                <div style={{ padding: '14px 26px', ...cStyles.mono, color: C.ink }}>{sec.section}</div>
                <div style={{ borderLeft: `1px solid ${C.line}` }} />
                <div style={{ borderLeft: `1px solid ${C.line}` }} />
                <div style={{ borderLeft: `1px solid ${C.line}` }} />
              </div>
              {sec.rows.map((row, i) => (
                <div key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '2fr 1fr 1fr 1fr',
                  borderBottom: `1px solid ${C.lineSoft}`,
                }}>
                  <div style={{ padding: '14px 26px', fontSize: 14 }}>{row[0]}</div>
                  <div style={{ padding: '14px 22px', borderLeft: `1px solid ${C.line}`, textAlign: 'center' }}>
                    <Check on={row[1]} />
                  </div>
                  <div style={{
                    padding: '14px 22px',
                    borderLeft: `1px solid ${C.line}`,
                    background: C.accentSoft,
                    textAlign: 'center',
                  }}>
                    <Check on={row[2]} highlight />
                  </div>
                  <div style={{ padding: '14px 22px', borderLeft: `1px solid ${C.line}`, textAlign: 'center' }}>
                    <Check on={row[3]} />
                  </div>
                </div>
              ))}
            </div>
          ))}

          <div style={{
            display: 'grid',
            gridTemplateColumns: '2fr 1fr 1fr 1fr',
          }}>
            <div style={{ padding: '22px 26px', color: C.muted, fontSize: 13, fontStyle: 'italic', fontFamily: C.serif }}>
              Full comparison & regional pricing in the Shopify App Store.
            </div>
            {tiers.map((t) => (
              <div key={t.name} style={{
                padding: '18px 14px',
                borderLeft: `1px solid ${C.line}`,
                background: t.highlight ? C.accentSoft : 'transparent',
              }}>
                <a href="#" style={{
                  display: 'block',
                  textAlign: 'center',
                  padding: '11px 12px',
                  borderRadius: 999,
                  fontSize: 13,
                  fontWeight: 500,
                  textDecoration: 'none',
                  background: t.highlight ? C.accent : C.ink,
                  color: '#fff',
                }}>{t.cta}</a>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CClosing() {
  return (
    <section style={{ padding: '120px 0', background: 'rgb(30, 30, 30)', color: C.paper }}>
      <div style={cStyles.container}>
        <div style={{
          fontFamily: C.mono, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'rgba(248,245,238,0.4)', marginBottom: 24,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ width: 24, height: 1, background: 'rgba(248,245,238,0.3)', display: 'inline-block' }} />
          Closing
        </div>
        <h2 style={{
          fontFamily: C.serif,
          fontSize: 64,
          lineHeight: 1.02,
          letterSpacing: '-0.03em',
          fontWeight: 400,
          margin: 0,
          maxWidth: 860,
          textWrap: 'balance',
          paddingBottom: 4,
        }}>
          Stop sending <span style={cStyles.italic}>one</span> invoice for <span style={{ ...cStyles.italic, color: C.accentBright }}>three</span> shipments.
        </h2>
        <p style={{
          fontSize: 18,
          color: 'rgba(248,245,238,0.72)',
          maxWidth: 560,
          marginTop: 20,
          lineHeight: 1.55,
        }}>
          Install Qixeo Invoice on your Shopify store — free up to 50 invoices per month, no credit card required.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
          <CPill primary>Install on Shopify →</CPill>
          <CPill onDark>Talk to us</CPill>
        </div>
      </div>
    </section>
  );
}

function CFooter() {
  return (
    <footer style={{ padding: '52px 0', background: C.paper, color: C.muted }}>
      <div style={{ ...cStyles.container, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 13 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
          <div style={{ fontFamily: C.serif, fontSize: 17, fontWeight: 500, color: C.ink }}>Qixeo <span style={cStyles.italic}>Invoice</span></div>
          <div style={cStyles.mono}>© 2026</div>
        </div>
        <div style={{ display: 'flex', gap: 26 }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Status</a>
          <a href="mailto:support@qixeo.com" style={{ color: 'inherit', textDecoration: 'none' }}>support@qixeo.com</a>
          <div style={cStyles.mono}>Built for Shopify</div>
        </div>
      </div>
    </footer>
  );
}

function DirectionC({ theme }) {
  // Rebuild palette + styles non-mutatively so child components (which read
  // `cStyles.mono`, `cStyles.italic` etc. at render time) pick up live tweaks
  // without mutating frozen React style objects.
  C = makeC(theme);
  cStyles = makeCStyles(C);
  return (
    <div style={cStyles.page}>
      <CNav />
      <CHero />
      <CHowItWorks />
      <CBuiltFor />
      <CPricing />
      <CClosing />
      <CFooter />
    </div>
  );
}

window.DirectionC = DirectionC;