// Brochure sections — mobile-first, scales up on desktop.
// Reuses brand assets: CarimbouLogo, LoyaltyCard, BUSINESSES, StampIcon, FakeQR.
// Visual language matches the design system: cream bg #EDE6D6, ink #1A2E28,
// Fraunces serif headlines, Plus Jakarta Sans body, dashed-border accents.

const { useState: useSt, useEffect: useEf, useRef: useRf } = React;

// ─────────────────────────────────────────────────────────────
// Reusable: Eyebrow tag (small uppercase label with bullet)
// ─────────────────────────────────────────────────────────────
function Eyebrow({ children, color = '#2D8A6B' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase',
      fontWeight: 700, color: 'rgba(26,46,40,0.7)',
      padding: '6px 12px', borderRadius: 100,
      background: 'rgba(26,46,40,0.04)',
      border: '1px dashed rgba(26,46,40,0.18)',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: color }}/>
      {children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Phone shell (used inside hero + sections; small + chrome-light)
// ─────────────────────────────────────────────────────────────
function MiniPhone({ width = 280, height = 580, children, tilt = 0, lift = 0 }) {
  return (
    <div style={{
      width, height,
      borderRadius: 36,
      background: '#0A0A0A',
      padding: 8,
      boxShadow: `0 ${30 + lift}px 60px rgba(0,0,0,0.28), 0 8px 18px rgba(0,0,0,0.18)`,
      transform: `rotate(${tilt}deg)`,
      flexShrink: 0,
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 28,
        overflow: 'hidden',
        position: 'relative',
        background: '#fff',
      }}>
        {/* notch */}
        <div style={{
          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 22, borderRadius: 14, background: '#0A0A0A', zIndex: 5,
        }}/>
        {children}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO  — side-by-side phones (customer card + business stamping)
// ─────────────────────────────────────────────────────────────
function HeroSection({ lang, copy }) {
  const t = copy.hero[lang];
  return (
    <section className="brochure-hero" data-screen-label="01 Hero">
      <div className="hero-inner">
        <div className="hero-text">
          <div className="hero-eyebrow"><Eyebrow>{t.eyebrow}</Eyebrow></div>
          <h1 className="hero-title">
            {t.title[0]}<br/>
            {t.title[1]}<span className="hero-title-accent">{t.title[2]}</span>
          </h1>
          <p className="hero-sub">{t.sub}</p>
          <div className="hero-ctas">
            <a href="/signup" className="btn btn-primary">{t.ctaPrimary}</a>
            <a href="#how" className="btn btn-secondary">{t.ctaSecondary}</a>
          </div>
        </div>

        <div className="hero-stage">
          <HeroPhones t={t}/>
        </div>
      </div>

      {/* dashed divider with stamp icons */}
      <div className="hero-divider" aria-hidden="true">
        <span/><span/><span/><span/><span/><span/><span/><span/><span/>
      </div>
    </section>
  );
}

// Two phones side by side, with floating "for the customer" / "for the business" tags
function HeroPhones({ t }) {
  return (
    <div className="hero-phones">
      <div className="hero-phone hero-phone-left">
        <div className="hero-phone-tag hero-phone-tag-customer">
          <span className="dot"/>
          {t.sideCustomer}
        </div>
        <MiniPhone width={260} height={540} tilt={-3} lift={6}>
          <HeroCustomerScreen/>
        </MiniPhone>
        <div className="hero-sticker hero-sticker-customer">{t.stickerCustomer}</div>
      </div>

      <div className="hero-phone hero-phone-right">
        <div className="hero-phone-tag hero-phone-tag-business">
          <span className="dot"/>
          {t.sideBusiness}
        </div>
        <MiniPhone width={260} height={540} tilt={3}>
          <HeroBusinessScreen/>
        </MiniPhone>
        <div className="hero-sticker hero-sticker-business">{t.stickerBusiness}</div>
      </div>
    </div>
  );
}

// Customer screen: WhatsApp-like chat with card preview
function HeroCustomerScreen() {
  return (
    <div style={{
      height: '100%', background: '#E5DDD5',
      display: 'flex', flexDirection: 'column',
      fontFamily: 'Plus Jakarta Sans, system-ui, sans-serif',
      paddingTop: 36,
    }}>
      {/* header bar (generic chat) */}
      <div style={{
        background: '#1A2E28', color: '#fff',
        padding: '10px 14px 12px', display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8, background: '#2D8A6B',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Fraunces, serif', fontWeight: 700, color: '#fff', fontSize: 18,
        }}>C</div>
        <div style={{ lineHeight: 1.1 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Estação Tapioca</div>
          <div style={{ fontSize: 10, opacity: 0.6 }}>online</div>
        </div>
      </div>

      {/* chat area */}
      <div style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
        <ChatBubble side="out">Oi! Quero meu cartão de fidelidade 🌿</ChatBubble>
        <ChatBubble side="in">Pronto, Andrea! Seu cartão tá aqui ⤵</ChatBubble>
        <div style={{ alignSelf: 'flex-start', maxWidth: '92%' }}>
          <div style={{
            background: '#fff', padding: 8, borderRadius: 12,
            boxShadow: '0 1px 1px rgba(0,0,0,0.08)',
            transform: 'scale(0.62)', transformOrigin: 'top left',
            marginBottom: -160,
          }}>
            <LoyaltyCard
              business={BUSINESSES.tapioca}
              customerName="Andrea Mendes"
              stamps={3}
              total={10}
              stampStyle="textured"
              showQR={false}
              compact
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function ChatBubble({ side, children }) {
  const isOut = side === 'out';
  return (
    <div style={{
      alignSelf: isOut ? 'flex-end' : 'flex-start',
      maxWidth: '78%',
      background: isOut ? '#DCF8C6' : '#fff',
      color: '#1A2E28',
      padding: '7px 10px',
      borderRadius: 10,
      fontSize: 12,
      boxShadow: '0 1px 1px rgba(0,0,0,0.08)',
      lineHeight: 1.35,
    }}>
      {children}
    </div>
  );
}

// Business screen: simplified stamping screen
function HeroBusinessScreen() {
  return (
    <div style={{
      height: '100%', background: '#F3EFE5', color: '#1A2E28',
      display: 'flex', flexDirection: 'column',
      fontFamily: 'Plus Jakarta Sans, system-ui, sans-serif',
      paddingTop: 36, position: 'relative',
    }}>
      {/* top bar */}
      <div style={{ padding: '10px 16px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <CarimbouLogo size={22}/>
          <span style={{ fontFamily: 'Fraunces, serif', fontSize: 13, fontWeight: 600 }}>Carimbou</span>
        </div>
        <div style={{ fontSize: 9, letterSpacing: 1, textTransform: 'uppercase', opacity: 0.55, fontWeight: 700 }}>Balcão</div>
      </div>

      {/* customer header */}
      <div style={{ padding: '10px 16px 0' }}>
        <div style={{ fontSize: 10, opacity: 0.5, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 700 }}>Cliente</div>
        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 18, fontWeight: 600, marginTop: 2 }}>Andrea Mendes</div>
        <div style={{ fontSize: 10.5, opacity: 0.55, marginTop: 2 }}>Estação Tapioca · 4 / 10</div>
      </div>

      {/* mini stamp grid */}
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{
          padding: 10, borderRadius: 14,
          background: '#fff',
          border: '1px dashed rgba(26,46,40,0.18)',
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4,
        }}>
          {Array.from({ length: 10 }).map((_, i) => {
            const filled = i < 4;
            return (
              <div key={i} style={{
                aspectRatio: '1', borderRadius: 8,
                background: filled ? 'rgba(45,138,107,0.12)' : 'rgba(26,46,40,0.04)',
                border: filled ? '1px solid rgba(45,138,107,0.2)' : '1px dashed rgba(26,46,40,0.15)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <StampIcon icon="tapioca" filled={filled} style="textured" color="#B5442A" size={20} seed={i+5}/>
              </div>
            );
          })}
        </div>
      </div>

      {/* big stamp button */}
      <div style={{ padding: '20px 16px 0', flex: 1, display: 'flex', alignItems: 'flex-end' }}>
        <button style={{
          width: '100%',
          background: '#2D8A6B', color: '#fff',
          border: 'none', borderRadius: 18,
          padding: '20px 16px',
          fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 600,
          letterSpacing: -0.3,
          boxShadow: '0 8px 22px rgba(45,138,107,0.35)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          cursor: 'pointer',
        }}>
          <StampIcon icon="tapioca" filled style="flat" color="#fff" size={26}/>
          Carimbar
        </button>
      </div>

      {/* footer hint */}
      <div style={{ padding: '12px 16px 16px', textAlign: 'center', fontSize: 10, opacity: 0.5 }}>
        Toque uma vez · um carimbo
      </div>
    </div>
  );
}

window.HeroSection = HeroSection;
window.Eyebrow = Eyebrow;
window.MiniPhone = MiniPhone;