// TextiGreen v4 · How-to-use guide modal

const { useEffect: useEg4 } = React;

const DIVIDER = { borderTop: '1px solid var(--line)', margin: '18px 0' };
const LABEL   = { fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)', fontFamily: 'var(--mono)', marginBottom: 10 };
const BODY    = { fontSize: 13, color: 'var(--fg)', lineHeight: 1.7, fontFamily: 'var(--sans, sans-serif)' };

function GuidePanel({ onClose }) {
  useEg4(() => {
    const handler = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, [onClose]);

  return (
    <div
      onClick={onClose}
      style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(10,10,10,0.4)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '60px 20px', overflowY: 'auto' }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{ width: '100%', maxWidth: 560, background: 'var(--bg)', border: '1px solid var(--fg)', padding: 28 }}
      >
        {/* Header row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
          <span style={{ fontSize: 16, fontWeight: 700, fontFamily: 'var(--display)', color: 'var(--fg)' }}>
            How to use TextiGreen
          </span>
          <button type="button" onClick={onClose} style={{ flexShrink: 0, width: 32, height: 32, border: '1px solid var(--line)', background: 'var(--bg)', cursor: 'pointer', color: 'var(--muted)', fontSize: 16, marginLeft: 12 }}>×</button>
        </div>

        {/* Intro */}
        <p style={{ ...BODY, marginTop: 0, marginBottom: 0 }}>
          A fast, fully-sourced carbon <strong>pre-estimate</strong> for fabrics — built for design, sourcing, and supplier conversations. It is a starting point, not a certified LCA.
        </p>

        <div style={DIVIDER} />

        {/* Section 1 */}
        <div style={{ ...LABEL }}>Get an estimate in 4 steps</div>
        <ol style={{ ...BODY, paddingLeft: 20, margin: 0 }}>
          <li style={{ marginBottom: 8 }}>
            <strong>Composition.</strong> Add up to 5 fibres and their shares; they should total 100%.
          </li>
          <li style={{ marginBottom: 8 }}>
            <strong>Stage.</strong> Pick the system boundary you're asking about — fibre, yarn, fabric, or dyed fabric. Numbers at different stages are <em>not</em> interchangeable.
          </li>
          <li style={{ marginBottom: 8 }}>
            <strong>Origin.</strong> Where it's made. This sets the electricity grid used for the power-using steps.
          </li>
          <li style={{ marginBottom: 8 }}>
            <strong>Dyeing &amp; boiler fuel (optional).</strong> Adds the dyeing step (shown as a <em>separate</em> boundary) and re-bases the process heat to the fuel you pick.
          </li>
        </ol>
        <p style={{ ...BODY, marginTop: 10, marginBottom: 0 }}>
          Then read the headline number as a <strong>range</strong>, not a single exact value.
        </p>

        <div style={DIVIDER} />

        {/* Section 2 */}
        <div style={{ ...LABEL }}>Reading the result honestly</div>
        <ul style={{ ...BODY, paddingLeft: 20, margin: 0 }}>
          <li style={{ marginBottom: 10 }}>
            <strong>It's a pre-estimate, not a certified LCA.</strong> Use it to compare options and open conversations — not as a compliance figure or a marketing claim. Never relabel the output as "certified", "carbon-neutral", or "zero-carbon".
          </li>
          <li style={{ marginBottom: 10 }}>
            <strong>The colour is a reference band, not a grade.</strong> It only places the number on a rough scale. It is not a score, and not an A–F rating.
          </li>
          <li style={{ marginBottom: 10 }}>
            <strong>Always read the range.</strong> Where the data allows, you get a min–max. A single point means the range isn't available yet — not that the figure is exact.
          </li>
          <li style={{ marginBottom: 10 }}>
            <strong>Different boundaries don't add up.</strong> Fibre, yarn, fabric and dyed fabric are separate boundaries. The tool won't sum across them, and neither should you. Dyeing is shown on its own and is <em>not</em> added to the fibre total.
          </li>
          <li style={{ marginBottom: 10 }}>
            <strong>Every number is sourced.</strong> Each figure carries a source, a confidence grade (A = high → D = proxy), and a caveat. Confidence reflects <em>data quality</em>, not how "green" a material is.
          </li>
          <li style={{ marginBottom: 0 }}>
            <strong>Grid &amp; thermal are re-bases, not add-ons.</strong> Choosing an origin or boiler fuel swaps the energy baseline already inside the figure — it doesn't stack extra emissions on top.
          </li>
        </ul>

        <div style={DIVIDER} />

        {/* Footer note */}
        <p style={{ fontSize: 11, color: 'var(--muted)', lineHeight: 1.6, margin: 0 }}>
          Spotted a gap or a number that looks off? That's expected at the pre-estimate stage — every figure shows its source and caveat so you can check it yourself.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { GuidePanel });