const whyStyles = {
  wrap:{padding:"120px 40px"},
  inner:{maxWidth:1360, margin:"0 auto"},
  kicker:{fontFamily:'"JetBrains Mono",monospace', fontSize:12, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--accent)", marginBottom:20},
  h2:{fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1.0, letterSpacing:"-0.03em", fontWeight:700, margin:"0 0 60px", maxWidth:900},
  grid:{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:0},
  tile:{
    padding:"40px 32px 36px",
    borderLeft:"1px solid var(--line)",
    position:"relative",
  },
  tileFirst:{borderLeft:"none"},
  tileNum:{fontFamily:'"JetBrains Mono",monospace', fontSize:12, letterSpacing:"0.14em", color:"var(--accent)", marginBottom:28},
  tileH:{fontSize:32, lineHeight:1.1, letterSpacing:"-0.02em", fontWeight:600, margin:"0 0 14px"},
  tileP:{fontSize:17, lineHeight:1.6, color:"var(--ink)", opacity:0.85, margin:0, textWrap:"pretty"}
};

function Why(){
  const items = [
    {n:"01", h:"Fast", p:"We remove the friction. Instant quotes 9 times out of 10 — and when a case needs a second look, we come back in under 60 minutes. No waiting game, no chaser emails.",
     deco:"speed"},
    {n:"02", h:"Simple", p:"Tools built for brokers, by brokers. Our ethos is dedicated to giving you as much time back as possible. It's your time, after all.",
     deco:"simple"},
    {n:"03", h:"Underwritten", p:"Class-leading underwriters at your fingertips. A-rated paper through our capacity panel — Accelerant, Convex, Irwell and ARAG. Well protected, properly advised.",
     deco:"expert"},
  ];
  return (
    <section id="why-us" style={whyStyles.wrap}>
      <div style={whyStyles.inner}>
        <div style={whyStyles.kicker}>Why us</div>
        <h2 style={whyStyles.h2}>Access underwriting that <em style={{fontStyle:"italic", color:"var(--accent)"}}>empowers</em> the broker.</h2>
        <div style={whyStyles.grid}>
          {items.map((it,i) => (
            <div key={it.n} style={{...whyStyles.tile, ...(i===0?whyStyles.tileFirst:{})}}>
              <div style={whyStyles.tileNum}>— {it.n}</div>
              <WhyIcon kind={it.deco}/>
              <h3 style={whyStyles.tileH}>{it.h}</h3>
              <p style={whyStyles.tileP}>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyIcon({kind}){
  const common = {width:68, height:68};
  const svgStyle = {display:"block", marginBottom:28};
  if (kind==="speed") return (
    <svg {...common} style={svgStyle} viewBox="0 0 68 68" fill="none">
      <circle cx="34" cy="34" r="30" stroke="var(--ink)" strokeWidth="1.5" strokeDasharray="2 4"/>
      <path d="M34 14 L34 34 L48 40" stroke="var(--ink)" strokeWidth="2.5" strokeLinecap="round"/>
      <circle cx="34" cy="34" r="3" fill="var(--accent)"/>
    </svg>
  );
  if (kind==="simple") return (
    <svg {...common} style={svgStyle} viewBox="0 0 68 68" fill="none">
      <rect x="10" y="18" width="48" height="32" rx="4" stroke="var(--ink)" strokeWidth="1.5"/>
      <path d="M18 34 L28 34 M34 34 L58 34" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round"/>
      <rect x="28" y="30" width="4" height="8" rx="1" fill="var(--accent)"/>
    </svg>
  );
  return (
    <svg {...common} style={svgStyle} viewBox="0 0 68 68" fill="none">
      <path d="M34 8 L58 20 V38 C58 50 48 58 34 62 C20 58 10 50 10 38 V20 Z" stroke="var(--ink)" strokeWidth="1.5"/>
      <path d="M24 34 L32 42 L46 26" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

window.Why = Why;