/* ============================================
   PRODUZ SITE — Page Sections (part 1)
   Hero, Pain, Solution
   ============================================ */

const { useState, useEffect, useRef } = React;

/* ===== Reveal helper (IntersectionObserver) ===== */
const Reveal = ({ children, delay = 0, className = "" }) => {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting) {
          setTimeout(() => setShown(true), delay);
          io.disconnect();
        }
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <div ref={ref} className={`reveal ${shown ? "in" : ""} ${className}`}>
      {children}
    </div>
  );
};

/* ===== HERO Phone Card (single phone in marquee column) ===== */
const PhoneCard = ({ image }) => {
  return (
    <div className="phone-card">
      <div className="phone-shell">
        <div className="phone-notch" />
        <div className="phone-screen">
          <img src={image} alt="case" loading="lazy" />
          <div className="phone-glare" />
        </div>
        <div className="phone-btn-side" />
        <div className="phone-btn-vol1" />
        <div className="phone-btn-vol2" />
      </div>
    </div>
  );
};

/* ===== Marquee Column (vertical infinite scroll) ===== */
const MarqueeColumn = ({ images, direction = "up", duration = 40, tilt = 0 }) => {
  // Duplicate images twice for seamless loop
  const loopedImages = [...images, ...images];

  return (
    <div className="marquee-col" style={{ transform: `rotate(${tilt}deg)` }}>
      <div
        className={`marquee-track ${direction === "up" ? "marquee-up" : "marquee-down"}`}
        style={{ animationDuration: `${duration}s` }}
      >
        {loopedImages.map((img, i) => (
          <PhoneCard key={i} image={img} />
        ))}
      </div>
    </div>
  );
};

/* ===== HERO ===== */
const Hero = ({ tweaks }) => {
  const columnLeft = [
    "produzsite/assets/hortensiasnews.png",
    "produzsite/assets/redemei-do-brasil.png",
    "produzsite/assets/organija.png",
    "produzsite/assets/orcamento-blindado-metodo-drywall.png",
    "produzsite/assets/priston-vendas.png",
  ];
  const columnRight = [
    "produzsite/assets/priston-vendas.png",
    "produzsite/assets/orcamento-blindado-metodo-drywall.png",
    "produzsite/assets/organija.png",
    "produzsite/assets/hortensiasnews.png",
    "produzsite/assets/redemei-do-brasil.png",
  ];

  return (
    <section className="hero hero-split" id="hero">
      <style>{`
        /* ===== HERO SPLIT LAYOUT ===== */
        .hero-split {
          height: calc(100vh - 80px);
          max-height: 900px;
          min-height: 640px;
          display: flex;
          align-items: stretch;
          padding-block: 0;
          overflow: hidden;
          position: relative;
        }
        .hero-split .container {
          height: 100%;
        }
        .hero-split-inner {
          display: grid;
          grid-template-columns: 1fr 1.05fr;
          gap: 48px;
          align-items: stretch;
          width: 100%;
          height: 100%;
        }
        .hero-split-left {
          display: flex;
          flex-direction: column;
          gap: 28px;
          position: relative;
          z-index: 2;
          justify-content: center;
          padding-block: 40px;
        }
        .hero-split-right {
          position: relative;
          height: 100%;
          overflow: hidden;
          display: flex;
          gap: 18px;
          align-items: center;
          justify-content: center;
        }

        /* Glow behind phones */
        .hero-phones-glow {
          position: absolute;
          inset: 0;
          background:
            radial-gradient(500px 500px at 50% 50%, rgba(123,92,255,0.18), transparent 65%);
          pointer-events: none;
          z-index: 0;
        }

        /* Badge row */
        .hero-badge-row {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }
        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 14px;
          border-radius: 999px;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.1);
          font-size: 12px;
          color: var(--text-2);
          font-weight: 500;
        }
        .hero-badge.fire {
          background: rgba(255,122,61,0.1);
          border-color: rgba(255,122,61,0.3);
          color: #ffb38c;
        }

        /* Typography */
        .hero-split h1 {
          font-size: clamp(40px, 4.6vw, 68px);
          line-height: 1.05;
          letter-spacing: -0.035em;
          font-weight: 700;
          text-align: left;
        }
        .hero-split .hero-sub {
          font-size: clamp(15px, 1.2vw, 17px);
          color: var(--text-2);
          line-height: 1.65;
          max-width: 520px;
          text-align: left;
        }
        .hero-split .hero-actions { justify-content: flex-start; }
        .hero-split .hero-trust { justify-content: flex-start; }

        /* ===== MARQUEE COLUMNS ===== */
        .marquee-col {
          position: relative;
          width: 240px;
          height: 100%;
          overflow: hidden;
          mask-image: linear-gradient(
            to bottom,
            black 0%,
            black 85%,
            transparent 100%
          );
          -webkit-mask-image: linear-gradient(
            to bottom,
            black 0%,
            black 85%,
            transparent 100%
          );
        }
        .marquee-track {
          display: flex;
          flex-direction: column;
          gap: 24px;
          will-change: transform;
        }
        .marquee-up {
          animation: marqueeUp linear infinite;
        }
        .marquee-down {
          animation: marqueeDown linear infinite;
        }
        @keyframes marqueeUp {
          0%   { transform: translateY(0); }
          100% { transform: translateY(-50%); }
        }
        @keyframes marqueeDown {
          0%   { transform: translateY(-50%); }
          100% { transform: translateY(0); }
        }
        .hero-split-right:hover .marquee-track {
          animation-play-state: paused;
        }

        /* ===== PHONE CARD ===== */
        .phone-card {
          width: 240px;
          flex-shrink: 0;
        }
        .phone-shell {
          position: relative;
          width: 240px;
          height: 500px;
          border-radius: 40px;
          background: linear-gradient(160deg, #1e1e2e 0%, #13131f 100%);
          border: 2px solid rgba(255,255,255,0.12);
          box-shadow:
            0 32px 64px rgba(0,0,0,0.55),
            0 0 0 1px rgba(255,255,255,0.04) inset,
            0 1px 0 rgba(255,255,255,0.1) inset;
          overflow: hidden;
        }
        .phone-notch {
          position: absolute;
          top: 14px;
          left: 50%;
          transform: translateX(-50%);
          width: 78px;
          height: 24px;
          border-radius: 99px;
          background: #0b0b14;
          z-index: 10;
          border: 1px solid rgba(255,255,255,0.06);
        }
        .phone-screen {
          position: absolute;
          inset: 10px 6px;
          border-radius: 30px;
          overflow: hidden;
          background: #fff;
        }
        .phone-screen img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top;
          display: block;
        }
        .phone-glare {
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
          pointer-events: none;
        }
        .phone-btn-side {
          position: absolute;
          right: -3px;
          top: 110px;
          width: 3px;
          height: 52px;
          border-radius: 0 4px 4px 0;
          background: rgba(255,255,255,0.12);
        }
        .phone-btn-vol1 {
          position: absolute;
          left: -3px;
          top: 96px;
          width: 3px;
          height: 30px;
          border-radius: 4px 0 0 4px;
          background: rgba(255,255,255,0.1);
        }
        .phone-btn-vol2 {
          position: absolute;
          left: -3px;
          top: 138px;
          width: 3px;
          height: 30px;
          border-radius: 4px 0 0 4px;
          background: rgba(255,255,255,0.1);
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1100px) {
          .hero-split-right { gap: 14px; }
          .marquee-col { width: 210px; }
          .phone-card, .phone-shell { width: 210px; }
          .phone-shell { height: 440px; }
        }
        @media (max-width: 860px) {
          .hero-split-inner { grid-template-columns: 1fr; }
          .hero-split-right { display: none; }
          .hero-split h1 { text-align: center; }
          .hero-split .hero-sub { text-align: center; max-width: 100%; }
          .hero-split .hero-actions { justify-content: center; }
          .hero-split .hero-trust { justify-content: center; }
          .hero-badge-row { justify-content: center; }
        }
      `}</style>

      <div className="container">
        <div className="hero-split-inner">
          {/* LEFT — copy */}
          <div className="hero-split-left">
            <div className="hero-badge-row">
              {tweaks.showPromo && (
                <Reveal>
                  <span className="hero-badge fire">
                    <Icon name="fire" size={12} />
                    Oferta por tempo limitado • Setup grátis
                  </span>
                </Reveal>
              )}
            </div>

            <Reveal delay={60}>
              <h1>
                Seja encontrado.<br />
                Conquiste clientes.<br />
                <span className="violet-text">Faça seu negócio crescer.</span>
              </h1>
            </Reveal>

            <Reveal delay={140}>
              <p className="hero-sub">
                Tenha um site profissional trabalhando 24h por você — atraindo clientes
                enquanto você cuida do que faz de melhor. No ar em até 7 dias, por{" "}
                <strong style={{ color: "var(--text-1)" }}>R$ 99,90/mês</strong>.
              </p>
            </Reveal>

            <Reveal delay={220}>
              <div className="hero-actions">
                <a href="#pricing" className="btn btn-cta">
                  Quero crescer meu negócio
                  <Icon name="arrow-up-right" size={18} />
                </a>
                <a href="#included" className="btn btn-ghost">
                  Ver como funciona
                  <span style={{ fontSize: 12 }}>↓</span>
                </a>
              </div>
            </Reveal>

            <Reveal delay={300}>
              <div className="hero-trust">
                <span><Icon name="check" size={14} className="check" /> +15 anos de experiência</span>
                <span><Icon name="check" size={14} className="check" /> Sem fidelidade</span>
                <span><Icon name="check" size={14} className="check" /> Garantia de satisfação</span>
              </div>
            </Reveal>
          </div>

          {/* RIGHT — marquee phones */}
          <div className="hero-split-right">
            <div className="hero-phones-glow" />
            <MarqueeColumn
              images={columnLeft}
              direction="up"
              duration={45}
            />
            <MarqueeColumn
              images={columnRight}
              direction="down"
              duration={45}
            />
          </div>
        </div>
      </div>
    </section>
  );
};

/* ===== PAIN ===== */
const Pain = () => {
  const cards = [
    {
      icon: "ghost",
      kicker: '"Eu sei que preciso, mas..."',
      title: "Nunca tive site",
      body:
        "Você sabe que perde cliente todo dia para o concorrente que aparece no Google. Mas criar site parece caro, complicado e demorado. Aí você adia. E adia. E adia. Enquanto isso, seu concorrente fatura.",
    },
    {
      icon: "money",
      kicker: '"Paguei R$ 3.000 e o site ficou parado"',
      title: "Já paguei caro e me arrependi",
      body:
        "Você investiu pesado, recebeu o site, e depois? Ninguém mais atendeu. Para mudar uma foto, cobram extra. Para atualizar um texto, somem. O site virou um boleto sem retorno.",
    },
    {
      icon: "wrench",
      kicker: '"Meu site existe, mas é como se não existisse"',
      title: "Tenho site, mas tá largado",
      body:
        "Está desatualizado, lento, fora do Google e você nem lembra a senha do painel. Está mais para fantasma do que para vendedor. Hora de aposentar esse zumbi.",
    },
  ];
  return (
    <section id="pain">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="tag-pill">
              <Icon name="sparkle" size={12} />
              A Dor
            </span>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="gradient-text">Se você se reconhecer aqui,<br />a gente precisa conversar.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Ter presença digital deixou de ser luxo lá pelos anos 2010. Mas a maioria dos
              negócios ainda trava em uma dessas três armadilhas:
            </p>
          </Reveal>
        </div>
        <div className="pain-grid">
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="card pain-card">
                <div className="icon-wrap">
                  <Icon name={c.icon} size={22} />
                </div>
                <h3>{c.title}</h3>
                <div className="quote">{c.kicker}</div>
                <p>{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={300}>
          <div className="pain-conclusion">
            <p>
              Em qualquer um desses cenários, o resultado é o mesmo:
              <br />
              <span className="violet-text">cliente que não te encontra é venda que não acontece.</span>
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ===== SOLUTION + COMPARE ===== */
const Solution = () => {
  const bad = [
    "Investimento alto de uma vez (R$ 2.000 a R$ 10.000)",
    "Site entregue e... boa sorte",
    "Cobrança extra para qualquer ajuste",
    "Hospedagem e domínio por sua conta",
    "Sem suporte, sem manutenção",
    "Em 1 ano, o site já está obsoleto",
  ];
  const good = [
    <><strong>R$ 99,90/mês.</strong> Só isso.</>,
    <>Site no ar em até <strong>7 dias</strong></>,
    <><strong>10 atualizações</strong> de conteúdo todo mês</>,
    <><strong>Tudo incluso</strong> na mensalidade</>,
    <>Suporte por <strong>WhatsApp</strong> e e-mail</>,
    <>Site <strong>sempre atualizado</strong> e no ar</>,
  ];
  return (
    <section id="solution">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="tag-pill"><Icon name="sparkle" size={12} /> A Solução</span>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="gradient-text">A gente virou o jogo:<br/>site agora é assinatura.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Esquece projeto fechado. Esquece orçamento gigante. Esquece ficar refém de
              freelancer que some no meio do caminho. No Produz Site você paga uma mensalidade
              simples e tem tudo que sua presença digital precisa para funcionar de verdade —
              todo mês, todo ano.
            </p>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <div className="compare">
            <div className="compare-col bad">
              <h4><Icon name="x" size={16} /> O modelo antigo</h4>
              <ul>
                {bad.map((t, i) => (
                  <li key={i}>
                    <span className="mark"><Icon name="x" size={12} stroke={2.4} /></span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="compare-col good">
              <h4><Icon name="sparkle" size={16} /> O jeito Produz Site</h4>
              <ul>
                {good.map((t, i) => (
                  <li key={i}>
                    <span className="mark"><Icon name="check" size={12} stroke={2.6} /></span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

window.Hero = Hero;
window.Pain = Pain;
window.Solution = Solution;
window.Reveal = Reveal;