// HERO
// - Full-bleed deep-sea navy with very subtle wave texture (SVG)
// - Eyebrow + oversize serif italic display headline
// - Supporting body, paired with the monogram seal as quiet authority
// - Bottom: ledger strip — Est. 2020 / 4 continents / 5 certifications / 24/7 ops
function Hero() {
  return (
    <>
      <style>{`
        .hero{
          position:relative;
          min-height:100vh;
          background:var(--navy);
          color:var(--paper);
          overflow:hidden;
          padding:140px 0 0;
          display:flex;
          flex-direction:column;
          isolation:isolate;
        }
        .hero::before{
          /* subtle wave texture, very faint */
          content:"";
          position:absolute;inset:0;z-index:0;
          background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='400' viewBox='0 0 1600 400'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'><path d='M0 60 Q 100 30 200 60 T 400 60 T 600 60 T 800 60 T 1000 60 T 1200 60 T 1400 60 T 1600 60'/><path d='M0 110 Q 120 80 240 110 T 480 110 T 720 110 T 960 110 T 1200 110 T 1440 110 T 1600 110'/><path d='M0 160 Q 80 130 160 160 T 320 160 T 480 160 T 640 160 T 800 160 T 960 160 T 1120 160 T 1280 160 T 1440 160 T 1600 160'/><path d='M0 210 Q 110 180 220 210 T 440 210 T 660 210 T 880 210 T 1100 210 T 1320 210 T 1540 210'/><path d='M0 260 Q 90 230 180 260 T 360 260 T 540 260 T 720 260 T 900 260 T 1080 260 T 1260 260 T 1440 260 T 1600 260'/><path d='M0 310 Q 130 280 260 310 T 520 310 T 780 310 T 1040 310 T 1300 310 T 1560 310'/><path d='M0 360 Q 100 330 200 360 T 400 360 T 600 360 T 800 360 T 1000 360 T 1200 360 T 1400 360 T 1600 360'/></g></svg>");
          background-size:100% auto;
          background-repeat:repeat-y;
          background-position:center top;
          opacity:.7;
        }
        .hero::after{
          content:"";
          position:absolute;inset:auto 0 0 0;height:30%;z-index:0;
          background:linear-gradient(to bottom, transparent, var(--navy));
          pointer-events:none;
        }
        .hero-grid{
          position:relative;z-index:1;
          flex:1;
          display:grid;
          grid-template-columns:1fr auto;
          gap:80px;
          align-items:center;
          padding:60px 0;
        }
        .hero-eyebrow{
          font-family:var(--mono);
          font-size:11px;letter-spacing:.22em;text-transform:uppercase;
          color:rgba(243,238,227,.65);
          display:flex;align-items:center;gap:14px;
          margin-bottom:36px;
        }
        .hero-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--brass);display:inline-block}
        .hero h1{
          font-family:var(--serif);
          font-weight:400;
          font-size:clamp(48px, 7.5vw, 120px);
          line-height:.96;
          letter-spacing:-0.02em;
          margin:0 0 36px;
          color:var(--paper);
        }
        .hero h1 em{
          font-style:italic;
          font-weight:500;
          color:#e9d9b3;
        }
        .hero-sub{
          max-width:540px;
          font-size:17px;
          line-height:1.55;
          color:rgba(243,238,227,.78);
          margin:0 0 44px;
          font-weight:300;
        }
        .hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
        .btn-primary{
          display:inline-flex;align-items:center;gap:14px;
          padding:16px 26px;
          background:var(--paper);
          color:var(--ink);
          border:1px solid var(--paper);
          font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
          cursor:pointer;transition:.2s;
        }
        .btn-primary:hover{background:transparent;color:var(--paper)}
        .btn-primary .arr{transition:transform .25s}
        .btn-primary:hover .arr{transform:translateX(4px)}
        .btn-ghost{
          display:inline-flex;align-items:center;gap:10px;
          padding:16px 0;
          color:rgba(243,238,227,.85);
          font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
          cursor:pointer;
          border-bottom:1px solid rgba(243,238,227,.3);
          transition:.2s;
        }
        .btn-ghost:hover{color:var(--paper);border-bottom-color:var(--paper)}
        .hero-seal{
          display:flex;align-items:center;justify-content:center;
          width:380px;height:380px;
          position:relative;
        }
        .hero-seal::before{
          content:"";position:absolute;inset:0;
          border:1px solid rgba(243,238,227,.15);
          border-radius:50%;
          animation:rot 60s linear infinite;
        }
        .hero-seal::after{
          content:"";position:absolute;inset:30px;
          border:1px solid rgba(243,238,227,.08);
          border-radius:50%;
        }
        @keyframes rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}

        /* Ledger strip across the bottom of hero */
        .hero-ledger{
          position:relative;z-index:2;
          border-top:1px solid rgba(243,238,227,.18);
          padding:28px 0;
          display:grid;
          grid-template-columns:repeat(4, 1fr);
          gap:8px;
        }
        .ledger-cell{
          padding:0 24px;
          border-left:1px solid rgba(243,238,227,.12);
        }
        .ledger-cell:first-child{border-left:0}
        .ledger-cell .k{
          font-family:var(--mono);
          font-size:10px;letter-spacing:.18em;text-transform:uppercase;
          color:rgba(243,238,227,.55);
          margin-bottom:8px;
        }
        .ledger-cell .v{
          font-family:var(--serif);
          font-size:32px;font-weight:500;font-style:italic;
          color:var(--paper);
          line-height:1;
        }
        .ledger-cell .v sup{
          font-size:14px;font-style:normal;font-family:var(--mono);
          color:rgba(243,238,227,.6);font-weight:400;
          margin-left:6px;vertical-align:super;
        }
        .ledger-cell .note{
          font-size:12px;color:rgba(243,238,227,.55);
          margin-top:6px;font-weight:300;
        }
        @media (max-width:980px){
          .hero{padding-top:120px}
          .hero-grid{grid-template-columns:1fr;gap:50px}
          .hero-seal{width:240px;height:240px;margin:0 auto;order:-1}
          .hero-ledger{grid-template-columns:repeat(2,1fr);row-gap:24px}
          .ledger-cell:nth-child(3){border-left:0}
        }
        @media (max-width:560px){
          .hero-ledger{grid-template-columns:1fr 1fr}
          .ledger-cell{padding:0 12px}
        }
      `}</style>

      <section className="hero">
        <div className="container hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="dot"/>
              Trading House · Miami, FL
            </div>
            <h1>
              Premium seafood,<br/>
              <em>traded with care</em><br/>
              across four continents.
            </h1>
            <p className="hero-sub">
              Sicilian Brs. Merchants connects producers and buyers worldwide —
              moving wild-caught and farm-raised seafood through trusted lanes
              with the discipline of a modern trading house and the standards
              of an old-world merchant family.
            </p>
            <div className="hero-actions">
              <button className="btn-primary" onClick={()=>document.getElementById('contact')?.scrollIntoView({behavior:'smooth'})}>
                Make an Inquiry
                <span className="arr">→</span>
              </button>
              <a className="btn-ghost" onClick={()=>document.getElementById('trade')?.scrollIntoView({behavior:'smooth'})}>
                See What We Trade
              </a>
            </div>
          </div>
          <div className="hero-seal">
            <SBMonogram size={300} variant="neg" />
          </div>
        </div>

        <div className="container">
          <div className="hero-ledger">
            <div className="ledger-cell">
              <div className="k">Established</div>
              <div className="v">2020</div>
              <div className="note">Family-owned, Miami</div>
            </div>
            <div className="ledger-cell">
              <div className="k">Continents Served</div>
              <div className="v">4<sup>+</sup></div>
              <div className="note">Americas · Europe · Africa · Asia</div>
            </div>
            <div className="ledger-cell">
              <div className="k">Certifications</div>
              <div className="v">5</div>
              <div className="note">BAP · ASC · MSC · HACCP · FDA</div>
            </div>
            <div className="ledger-cell">
              <div className="k">Operations</div>
              <div className="v">24/7</div>
              <div className="note">Logistics & cold-chain coverage</div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.Hero = Hero;