/* Hero — eyebrow, big headline, sub, CTA, asterisk line, phones row.
   Phone count varies by viewport (5 on desktop, 5 scrollable on tablet,
   3 flat on phone). The headline is data-driven via HERO_HEADLINES so the
   tweaks panel can swap variants without code changes. */

const HERO_HEADLINES = [
  { id:'original',         render: () => (<><br/><span className="it">built the way</span> <span className="it">YOU</span> want</>) },
  { id:'paying-clients',   render: () => (<><br/>that turns followers<br/>into <span className="it">paying clients.</span></>) },
  { id:'somewhere-to-pay', render: () => (<><br/>so your audience finally has<br/><span className="it">somewhere to pay you.</span></>) },
  { id:'one-app',          render: () => (<><br/>infinite clients<br/><span className="it">without the 1:1s.</span></>) },
  { id:'productised',      render: () => (<><br/>your methodology,<br/><span className="it">productised.</span></>) },
  { id:'beyond-call',      render: () => (<><br/>to scale your magic<br/><span className="it">beyond the call.</span></>) },
  { id:'believers',        render: () => (<><br/>where followers become<br/><span className="it">believers (and buyers).</span></>) },
  { id:'attention-income', render: () => (<><br/>that turns attention<br/><span className="it">into income.</span></>) },
  { id:'creator-founder',  render: () => (<>from <span className="it">creator</span> to<br/><span className="it">founder,</span> in 90 days.</>) },
  { id:'not-another-reel', render: () => (<><br/>because your followers<br/>don't need <span className="it">another reel.</span></>) },
];
window.HERO_HEADLINES = HERO_HEADLINES;

const Hero = ({ headlineId = 'paying-clients' }) => {
  const { useViewport, ArrowLeft, ArrowRight } = window.AAS;
  const { isXs, isSm, isMd } = useViewport();
  const headline = HERO_HEADLINES.find(h => h.id === headlineId) || HERO_HEADLINES[1];

  // Phone screens (shared across all viewports — only positioning differs).
  const screens = [
    <window.PhoneScreens.ScreenHome      accent="#EBA8F2" />,
    <window.PhoneScreens.ScreenLibrary   accent="#EBA8F2" />,
    <window.PhoneScreens.ScreenCall      accent="#EBA8F2" />,
    <window.PhoneScreens.ScreenCommunity accent="#EBA8F2" />,
    <window.PhoneScreens.ScreenBooking   accent="#EBA8F2" />,
  ];

  // Per-viewport tilt (deg) and translate (px). Mobile shows the first 3 only.
  // Edit these arrays to change how the hero phones sit on each breakpoint.
  const phonesDesktop = [
    { tilt:-6, y:20, x:18,   z:1 },
    { tilt:6,  y:20, x:-24, z:2 },
    { tilt:0,  y:16, x:0,   z:3 },
    { tilt:-6, y:20, x:24,  z:2 },
    { tilt:6,  y:20, x:-18,  z:1 },
  ];
  const phonesTablet = [
    { tilt:6, y:14, x:28,   z:1 },
    { tilt:-6,  y:14, x:40, z:2 },
    { tilt:0,  y:10, x:0,   z:3 },
    { tilt:6, y:14, x:-40,  z:2 },
    { tilt:-6,  y:14, x:-28,  z:1 },
  ];
  const phonesMobile = [
    { tilt:6, y:6, x:20,   z:1 },
    { tilt:-8,  y:6, x:32, z:2 },
    { tilt:0,  y:4, x:0,   z:3 },
    { tilt:8, y:6, x:-32,  z:2 },
    { tilt:-6,  y:6, x:-20,  z:1 },
  ];

  const phonesByViewport = isSm ? phonesMobile : isMd ? phonesTablet : phonesDesktop;
  const visiblePhones = phonesByViewport.map((p, i) => ({ ...p, screen: screens[i] }));
  const phoneW    = isXs ? 88 : isSm ? 108 : isMd ? 180 : 210;
  const arrowW    = isSm ? 80 : isMd ? 120 : 160;

  return (
    <section className="hero">
      <div className="container hero-inner">
        <div className="eyebrow hero-eyebrow">THE APP STUDIO FOR CREATOR GIRLIES</div>
        <h1 className="serif hero-title">
          Your own app, {headline.render()}
        </h1>
        <p className="hero-sub">
          We help creators launch their own custom apps, so you can move away from coaching calls & UGC gigs and start charging what you're worth <span className="hero-sparkle">✨</span>
        </p>

        <div className="hero-cta-row">
          {!isSm && <span className="hero-cta-arrow"><ArrowLeft w={arrowW} /></span>}
          <a href="https://tally.so/r/NpM1RW" target="_blank" rel="noopener" className="pill-btn lg">APPLY NOW</a>
          {!isSm && <span className="hero-cta-arrow"><ArrowRight w={arrowW} /></span>}
        </div>

        <div className="asterisk-line">* Be ahead of the game - eBooks and websites are dinosaur age 🦖 *</div>

        {/* Phones row — flat 5-up at every viewport; bleed off the edges on mobile. */}
        <div className="hero-phones">
          {visiblePhones.map((p, i) => (
            <div key={i} className="hero-phone" style={{ transform:`translate(${p.x || 0}px, ${p.y || 0}px)`, zIndex: p.z || 0 }}>
              <window.PhoneFrame tilt={p.tilt} w={phoneW}>{p.screen}</window.PhoneFrame>
            </div>
          ))}
          {/* Hand annotations — desktop only. */}
          {!isMd && (
            <>
              <div className="hand hero-annotation hero-annotation--left"><span>Omggg!!</span></div>
              <div className="hand hero-annotation hero-annotation--right"><span>LFGGGG!!!</span></div>
            </>
          )}
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.Hero = Hero;