// Marketing/Lead-Gen section + About the Owners section

function MarketingSection(){
  const ChromeTitle = window.ChromeTitle;
  const RedTitle = window.RedTitle;
  const Icons = window.Icons;
  const LightningArc = window.LightningArc;

  const capabilities = [
    { n:'01', t:'Permit & Property Scraping', d:'New construction, pool permits, and property sales across our service area, pulled daily — every fresh permit becomes an outbound lead.' },
    { n:'02', t:'God\u2019s-Eye Lead Map', d:'Live view of every prospect, quote, and install across PA / OH / WV / MD / NY. Cluster, filter, and dispatch from one screen.' },
    { n:'03', t:'Inbound Capture, 24/7', d:'Calls, forms, DMs, even drive-by photo replies — all routed to one inbox with AI triage and instant first-touch.' },
    { n:'04', t:'Quote-to-Close Automation', d:'Follow-ups fire on the right cadence. Stale quotes get a nudge. Hot ones get a call back inside 90 seconds.' },
    { n:'05', t:'Built In-House',   d:'Designed and coded by our eldest brother — also a Thraxel owner. No off-the-shelf CRM tax. The system is ours, and so is the edge it gives us.' },
  ];

  return (
    <section id="marketing" style={{padding:'120px 64px',background:'var(--thraxel-canvas)',position:'relative',overflow:'hidden',borderTop:'1px solid #1a1a1e'}}>
      <div style={{position:'absolute',top:0,right:'-15%',width:'55%',height:'100%',opacity:0.05,pointerEvents:'none'}}>
        <LightningArc seed={11} opacity={0.5}/>
      </div>

      <div style={{maxWidth:1280,margin:'0 auto',position:'relative'}}>
        <div className="eyebrow-red" style={{marginBottom:14}}>MARKETING · LEAD-GEN · BUILT IN-HOUSE</div>
        <ChromeTitle size={'clamp(36px,5.2vw,76px)'}>We don't wait for leads.</ChromeTitle>
        <div style={{marginTop:10}}><RedTitle size={'clamp(22px,3.4vw,46px)'}>We build the system that finds them.</RedTitle></div>
        <p style={{maxWidth:780,marginTop:24,color:'var(--thraxel-light-grey)',fontSize:18,lineHeight:1.55}}>
          See it in action in the walkthrough above — the same automation backbone behind Thraxel AI Hub powers our own marketing engine. A custom platform built in-house by our eldest brother and Thraxel co-owner. Every permit, every property sale, every inbound DM funnels into one map.
        </p>

        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:14,marginTop:48}}>
          {capabilities.map(c=>(
            <div key={c.t} style={{
              padding:'22px 22px 24px',background:'#0a0a0a',border:'1px solid #2a2a2e',
              position:'relative',
            }}>
              <div style={{
                fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:11,letterSpacing:'0.22em',
                color:'var(--thraxel-red)',marginBottom:10,
              }}>{c.n}</div>
              <div className="label" style={{color:'#fff',marginBottom:8,letterSpacing:'0.18em',fontSize:12}}>{c.t}</div>
              <div style={{color:'var(--thraxel-light-grey)',fontSize:13,lineHeight:1.5}}>{c.d}</div>
            </div>
          ))}
          <div style={{
            padding:'22px 22px 24px',
            background:'linear-gradient(135deg,rgba(200,16,46,0.14),rgba(200,16,46,0.02))',
            border:'1px solid var(--thraxel-red)',
            display:'flex',flexDirection:'column',justifyContent:'space-between',
          }}>
            <div>
              <div className="label" style={{color:'var(--thraxel-red)',marginBottom:8,letterSpacing:'0.22em',fontSize:11}}>WANT THIS FOR YOUR BUSINESS?</div>
              <div style={{color:'#fff',fontSize:13,marginBottom:14,lineHeight:1.5}}>We license our platform to non-competing home-service companies. One stack, no SaaS bloat, fully managed.</div>
            </div>
            <a href="#" className="btn-red" style={{justifyContent:'center'}}>Talk to the Builder <Icons.arrow/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function OwnersSection(){
  const ChromeTitle = window.ChromeTitle;
  const owners = [
    { name:'AJ',     img:'public/img/owners/aj-new.png',     focus:'Founder', obj:'center 22%', ar:'4/5', fit:'cover' },
    { name:'Tyson',  img:'public/img/owners/tyson-fixed.jpg',focus:'Founder', obj:'center 50%', ar:'4/3', fit:'cover' },
    { name:'Camden', img:'public/img/owners/tyson.jpg',      focus:'Founder', obj:'center 50%', ar:'4/3', fit:'contain' },
  ];
  return (
    <section id="owners" style={{padding:'120px 64px 100px',background:'var(--thraxel-jet)'}}>
      <div style={{maxWidth:1280,margin:'0 auto',textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:14}}>FAMILY-OWNED · BROTHER-RUN</div>
        <ChromeTitle size={'clamp(32px,4.4vw,64px)'}>Formerly 160 Glow. Brothers In Lighting.</ChromeTitle>
        <div style={{marginTop:10,fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:'clamp(22px,3vw,44px)',letterSpacing:'0.08em',
          color:'#e8e8eb',
          WebkitTextStroke:'1px rgba(200,16,46,0.55)',
          textShadow:'0 0 18px rgba(200,16,46,0.18)',
        }}>Now Thraxel.</div>
        <p style={{maxWidth:720,margin:'22px auto 0',color:'var(--thraxel-light-grey)',fontSize:17,lineHeight:1.55}}>
          Thraxel is brother-owned and brother-run. Every install, every quote, every late-night service call goes through us — not a call center, not a franchise. Every line of code, every mockup image and design, every quote — done by the three of us. When you hire Thraxel, you hire family.
        </p>

        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24,marginTop:64}} className="ow-grid">
          {owners.map(o=>(
            <div key={o.name} style={{
              background:'#0a0a0a',border:'1px solid #2a2a2e',
              padding:0,overflow:'hidden',position:'relative',
            }}>
              <div style={{aspectRatio: o.ar || '4/5',overflow:'hidden',background:'#000',position:'relative'}}>
                <img src={o.img} loading="lazy" style={{
                  width:'100%',height:'100%',objectFit: o.fit || 'cover',objectPosition:o.obj,
                }}/>
                <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.85) 100%)',pointerEvents:'none'}}/>
              </div>
              <div style={{padding:'22px 24px 26px',textAlign:'left'}}>
                <div style={{fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:28,letterSpacing:'0.04em',color:'#fff'}}>{o.name}</div>
                <div style={{fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:10,letterSpacing:'0.22em',color:'var(--thraxel-red)',marginTop:6}}>{o.focus}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop:48,padding:'22px 28px',background:'#0a0a0a',border:'1px solid #2a2a2e',
          display:'inline-block',
        }}>
          <span style={{fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:11,letterSpacing:'0.22em',color:'var(--thraxel-mid-grey)'}}>EVERY THRAXEL INSTALL</span>
          <span style={{margin:'0 14px',color:'#2a2a2e'}}>·</span>
          <span style={{fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:13,letterSpacing:'0.2em',color:'#fff'}}>BACKED BY OUR INSURANCE POLICY &amp; MANUFACTURER-REQUIRED INSTALL CERTIFICATIONS</span>
        </div>

        <style>{`
          @media (max-width:900px){.ow-grid{grid-template-columns:1fr!important;max-width:420px;margin-left:auto;margin-right:auto}}
        `}</style>
      </div>
    </section>
  );
}

Object.assign(window, { MarketingSection, OwnersSection });