// Mid sections: Logos, Bento "what we ship", Tabbed capabilities, Testimonial

function Logos() {
  return (
    <section className="section section--tight shell">
      <div className="headed">
        <span className="eyebrow"><span className="dot"/>Trusted on Main Street</span>
        <h2 className="h2" style={{marginTop:16}}>140 + neighborhood<br/>businesses, served.</h2>
      </div>
      <div className="logos">
        {window.BARRAGE.clients.map((c) => {
          const M = window.Mark[c.kind] || window.Mark.dental;
          return (
            <div className="logos__cell" key={c.name}>
              <span className="mark"><M /></span>
              <span>{c.name}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function Bento() {
  return (
    <section className="section shell" id="services">
      <div className="headed">
        <span className="eyebrow"><Icon.bolt style={{width:14,height:14}}/>What we ship</span>
        <h2 className="h2 h2--sans" style={{marginTop:18}}>Everything you need to<br/>fill the appointment book.</h2>
        <p className="lede" style={{margin:"18px auto 0"}}>
          A new site is just the start. We wire up the systems that turn visits into bookings —
          and bookings into regulars.
        </p>
      </div>

      <div className="bento">
        <div className="bento__cell">
          <h3>Bookings, on autopilot.</h3>
          <p>Online scheduling that syncs to your calendar. We integrate with the booking tools you already use — or set one up if you don't have one yet.</p>
          <div className="bento__visual"><CalendarMock /></div>
        </div>

        <div className="bento__cell hatched-bg">
          <h3>Reviews that recruit.</h3>
          <p>We automate the ask after every visit. Glowing Google reviews show up on your homepage the day they go live.</p>
          <div className="bento__visual"><ReviewsMock /></div>
        </div>

        <div className="bento__cell">
          <h3>Show up in Maps.</h3>
          <p>Local SEO, schema markup, and Google Business Profile tuning. We get you in the local 3-pack — the first thing your neighbors see.</p>
          <div className="bento__visual"><MapMock /></div>
        </div>

        <div className="bento__cell hatched-bg">
          <h3>Mobile-first, always.</h3>
          <p>80% of your visitors are on a phone walking past your storefront. Every site we build is built for that thumb first.</p>
          <div className="bento__visual"><PhoneMock /></div>
        </div>

        <div className="bento__cell">
          <h3>Show up in AI search engines.</h3>
          <p>When neighbors ask ChatGPT, Perplexity, Claude, or Google's AI Overviews "best [whatever] near me," your shop is what the model recommends — by name, with your link as the source.</p>
          <div className="bento__visual"><AISearchMock /></div>
        </div>

        <div className="bento__cell hatched-bg">
          <h3>Built to be cited.</h3>
          <p>Structured data, schema markup, and clean entity graphs — the machine-readable layer that makes AI engines confident enough to cite you instead of the chain three towns over.</p>
          <div className="bento__visual"><SchemaMock /></div>
        </div>
      </div>
    </section>
  );
}

function Capabilities() {
  const tabs = [
    {
      key: "rank",
      title: "Rank in your neighborhood",
      desc: "Local SEO that puts you in the top 3 of Google Maps where it matters — your zip code.",
    },
    {
      key: "convert",
      title: "Convert curious clicks",
      desc: "Sticky CTAs, click-to-call, and a booking flow that doesn't bounce visitors to a third party.",
    },
    {
      key: "look",
      title: "Look like the best in town",
      desc: "Photography, a refreshed wordmark, and a site that signals 'these folks care' before a word is read.",
    },
  ];
  const [active, setActive] = React.useState(0);

  return (
    <section className="section shell">
      <div className="headed">
        <span className="eyebrow"><Icon.search style={{width:14,height:14}}/>How we move the needle</span>
        <h2 className="h2" style={{marginTop:18}}>Three jobs your site has<br/>to do, every single day.</h2>
      </div>

      <div className="tabbed">
        <div className="tabbed__list" role="tablist">
          {tabs.map((t, i) => (
            <button
              key={t.key}
              className="tab"
              role="tab"
              aria-selected={active === i}
              onClick={() => setActive(i)}
            >
              <h4>{t.title}</h4>
              <p>{t.desc}</p>
            </button>
          ))}
        </div>
        <div className="tabbed__panel">
          {active === 0 && <RankPanel />}
          {active === 1 && <ConvertPanel />}
          {active === 2 && <LookPanel />}
        </div>
      </div>
    </section>
  );
}

function RankPanel() {
  return (
    <div className="cap-visual">
      <div className="kicker" style={{marginBottom:14, color:"#2C3A33"}}>Google · "Dentist near me" · 94114</div>
      {[
        { name: "Castro Family Dental",  stat: "0.4 mi", you: false },
        { name: "Bayview Smiles",        stat: "0.9 mi", you: false },
        { name: "Sunny Bay Dental",      stat: "0.6 mi", you: true },
        { name: "16th Street Dentistry", stat: "1.1 mi", you: false },
      ].map((r, i) => (
        <div className="cap-visual__row" key={i}>
          <span className={`rank ${r.you ? "is-you" : ""}`}>{i+1}</span>
          <span className="name">{r.name}{r.you && <span style={{color:"var(--accent)",marginLeft:8,fontFamily:"var(--mono)",fontSize:11}}>YOU</span>}</span>
          <span className="stat">{r.stat} · ★ 4.{9-i}</span>
        </div>
      ))}
      <div className="cap-visual__row" style={{background:"#2C3A33",color:"#E9F3DC",border:"none",marginTop:14}}>
        <span style={{fontFamily:"var(--mono)",fontSize:11,opacity:.6}}>RANK CHANGE</span>
        <span style={{flex:1}}/>
        <span style={{color:"#E9F3DC",fontWeight:500}}>↑ 7 positions in 60 days</span>
      </div>
    </div>
  );
}

function ConvertPanel() {
  return (
    <div className="cap-visual" style={{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:18}}>
      <div className="kicker" style={{color:"#2C3A33"}}>Conversion funnel · Last 30 days</div>
      {[
        { label: "Visitors",            val: 4820, w: 100 },
        { label: "Clicked to book",     val: 1420, w: 64  },
        { label: "Started form",        val: 1120, w: 52  },
        { label: "Completed booking",   val:  812, w: 42  },
      ].map((s, i) => (
        <div key={i} style={{width:"100%",maxWidth:420}}>
          <div style={{display:"flex",justifyContent:"space-between",fontSize:12,marginBottom:6, color:"#2C3A33"}}>
            <span>{s.label}</span>
            <span style={{fontFamily:"var(--mono)"}}>{s.val.toLocaleString()}</span>
          </div>
          <div style={{height:8,background:"rgba(44,58,51,.12)",borderRadius:4,overflow:"hidden"}}>
            <div style={{
              height:"100%",
              width: s.w + "%",
              background: i === 3 ? "var(--accent)" : "#2C3A33",
              borderRadius:4,
              transition:"width .6s"
            }}/>
          </div>
        </div>
      ))}
      <div className="cap-visual__row" style={{marginTop:8,background:"#2C3A33",color:"#E9F3DC",border:"none"}}>
        <span style={{flex:1}}>Booking rate</span>
        <span style={{fontFamily:"var(--mono)"}}>16.8% · ↑ 38% YoY</span>
      </div>
    </div>
  );
}

function LookPanel() {
  return (
    <div className="cap-visual" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
      <div style={{background:"var(--surface)",border:"1px solid var(--line)",borderRadius:12,padding:18,display:"flex",flexDirection:"column",gap:10}}>
        <div className="kicker">Before</div>
        <div style={{height:120,borderRadius:8,background:"#E5DDC9",position:"relative",overflow:"hidden"}}>
          <div style={{position:"absolute",inset:8,border:"2px dashed #B8AA88",borderRadius:4,display:"flex",alignItems:"center",justifyContent:"center",color:"#8C7E5C",fontSize:11,fontFamily:"var(--mono)"}}>old wix site</div>
        </div>
        <div style={{fontSize:12,color:"var(--ink-2)"}}>Inconsistent fonts. Stock photos. No mobile menu.</div>
      </div>
      <div style={{background:"#2C3A33",border:"1px solid #2C3A33",borderRadius:12,padding:18,display:"flex",flexDirection:"column",gap:10,color:"#E9F3DC"}}>
        <div className="kicker" style={{color:"#B6CFA0"}}>After</div>
        <div style={{height:120,borderRadius:8,background:"linear-gradient(180deg,#E9F3DC,#B6CFA0)",position:"relative",overflow:"hidden"}}>
          <div style={{position:"absolute",bottom:8,left:10,fontFamily:"var(--serif)",fontSize:20,color:"#2C3A33"}}>Sunny Bay</div>
          <div style={{position:"absolute",bottom:8,right:10,fontFamily:"var(--mono)",fontSize:9,color:"#2C3A33",letterSpacing:".12em"}}>BOOK ONLINE</div>
        </div>
        <div style={{fontSize:12,opacity:.8}}>Custom type. Real photography. One‑tap booking.</div>
      </div>
      <div style={{gridColumn:"span 2",background:"var(--surface)",border:"1px solid var(--line)",borderRadius:12,padding:18,display:"flex",alignItems:"center",justifyContent:"space-between"}}>
        <div>
          <div className="kicker">Brand pass included</div>
          <div style={{marginTop:6,fontFamily:"var(--serif)",fontSize:22,letterSpacing:"-.01em"}}>Logo · type · color · photography</div>
        </div>
        <div style={{display:"flex",gap:6}}>
          {["#C66A3D","#2C3A33","#6B2737","#F4ECE2","#1F1A15"].map(c=>(
            <span key={c} style={{width:32,height:32,borderRadius:"50%",background:c,border:"1px solid rgba(0,0,0,.1)"}}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function Testimonial() {
  const [i, setI] = React.useState(0);
  const items = window.BARRAGE.testimonials;
  const t = items[i];
  return (
    <section className="section shell">
      <div className="headed">
        <span className="eyebrow"><Icon.spark style={{width:13,height:13,color:"var(--accent)"}}/>Word from the shop floor</span>
        <h2 className="h2" style={{marginTop:18}}>The phones ring,<br/>the chairs fill.</h2>
      </div>
      <div className="testimonial">
        <div className="testimonial__portrait">
          <div style={{
            width:"100%",height:"100%",
            background: `linear-gradient(135deg,#C66A3D,#9C4F2D)`,
            display:"flex",alignItems:"center",justifyContent:"center",
            fontFamily:"var(--serif)",fontSize:96,color:"var(--surface)"
          }}>{t.initial}</div>
        </div>
        <div>
          <p className="testimonial__quote">"{t.quote}"</p>
          <div className="testimonial__who">
            <div className="name">{t.name}</div>
            <div>{t.role}</div>
          </div>
        </div>
        <div className="testimonial__nav">
          <button onClick={()=>setI((i-1+items.length)%items.length)} aria-label="Previous"><Icon.chevL/></button>
          <button onClick={()=>setI((i+1)%items.length)} aria-label="Next"><Icon.chevR/></button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Logos, Bento, Capabilities, Testimonial });