// ZION Pages — FAQ, Terms & Policy, Safety
// Cleaner inner pages: ember glow only at the very top and the very bottom
// (the bottom glow comes from the global StayLit footer).
// To replace placeholder copy, edit the `FAQ_ITEMS`, `TERMS_SECTIONS`, and
// `SAFETY_SECTIONS` arrays at the bottom of this file.

function SubPageShell({ kicker, title, accent, children, onBack }) {
  return (
    <main style={{ background: '#0A0A0A', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      {/* Top ember wash — same mood as Hero / StayLit, but smaller */}
      <div aria-hidden style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: 'clamp(200px, 22vw, 360px)',
        pointerEvents: 'none', zIndex: 0,
        background:
          'radial-gradient(ellipse 90% 70% at 50% 0%, #3A0F08 0%, rgba(58,15,8,0.4) 40%, rgba(10,10,10,0) 100%)',
      }} />

      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: 880, margin: '0 auto',
        padding: '80px 32px 120px',
      }}>
        <a onClick={onBack} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          cursor: 'pointer',
          fontFamily: 'Poppins', fontWeight: 700, fontSize: 12,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.7)',
          marginBottom: 48, textDecoration: 'none',
        }}>← BACK</a>

        {kicker && (
          <div style={{
            fontFamily: 'var(--font-script)', fontStyle: 'italic',
            fontSize: 'clamp(22px, 3vw, 40px)',
            color: '#F7591F', textTransform: 'uppercase',
            marginBottom: 0,
          }}>{kicker}</div>
        )}

        <h1 style={{
          fontFamily: 'Poppins, sans-serif', fontWeight: 900,
          fontSize: 'clamp(56px, 9vw, 140px)',
          lineHeight: 0.95, letterSpacing: '-0.025em',
          textTransform: 'uppercase',
          margin: '4px 0 64px', color: '#fff',
        }}>{title}<span style={{ color: '#F7591F' }}>.</span></h1>

        {children}
      </div>
    </main>
  );
}

/* ============================================================
   FAQ — accordion list
   ============================================================ */
function FaqPage({ onBack }) {
  const [open, setOpen] = React.useState(null);
  return (
    <SubPageShell kicker="Help" title="FAQ" onBack={onBack}>
      <div>
        {FAQ_ITEMS.map((item, i) => (
          <FaqRow
            key={i}
            q={item.q}
            a={item.a}
            isOpen={open === i}
            onToggle={() => setOpen(open === i ? null : i)}
          />
        ))}
      </div>

      <div style={{
        marginTop: 64, padding: '28px 0',
        borderTop: '1px solid rgba(255,255,255,0.12)',
        fontFamily: 'Poppins', fontSize: 14, color: 'rgba(255,255,255,0.7)',
      }}>
        Still stuck? Email{' '}
        <a href="mailto:manager@levizion.com" style={{
          color: '#F7591F', textDecoration: 'none', fontWeight: 600,
        }}>manager@levizion.com</a>
      </div>
    </SubPageShell>
  );
}

function FaqRow({ q, a, isOpen, onToggle }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div style={{
      marginBottom: 12,
      borderRadius: 18,
      position: 'relative',
      border: `1px solid ${isOpen ? 'rgba(247,89,31,0.55)' : hover ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.10)'}`,
      background: isOpen
        ? 'linear-gradient(180deg, rgba(247,89,31,0.10) 0%, rgba(247,89,31,0.02) 100%)'
        : hover ? 'rgba(255,255,255,0.035)' : 'rgba(255,255,255,0.015)',
      boxShadow: isOpen ? '0 0 0 1px rgba(247,89,31,0.15), 0 18px 50px rgba(247,89,31,0.10)' : 'none',
      overflow: 'hidden',
      transform: hover && !isOpen ? 'translateY(-2px)' : 'translateY(0)',
      transition: 'border-color 260ms, background 260ms, box-shadow 320ms, transform 260ms cubic-bezier(0.16,1,0.3,1)',
    }}>
      {/* Left fire accent bar — grows when open */}
      <span aria-hidden style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
        background: '#F7591F',
        transform: `scaleY(${isOpen ? 1 : 0})`,
        transformOrigin: 'center',
        transition: 'transform 360ms cubic-bezier(0.16,1,0.3,1)',
      }} />

      <button onClick={onToggle}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          width: '100%', textAlign: 'left',
          background: 'transparent', border: 'none', cursor: 'pointer',
          padding: '20px 22px 20px 28px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
          color: '#fff',
        }}>
        <span style={{
          fontFamily: 'Poppins, sans-serif', fontWeight: isOpen ? 700 : 500,
          fontSize: 'clamp(15px, 1.1vw, 17px)', lineHeight: 1.4,
          color: isOpen ? '#fff' : 'rgba(255,255,255,0.92)',
          transition: 'font-weight 120ms, color 200ms',
        }}>{q}</span>
        <span style={{
          width: 30, height: 30, borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0, position: 'relative',
          border: `1px solid ${isOpen ? '#F7591F' : 'rgba(255,255,255,0.28)'}`,
          background: isOpen ? '#F7591F' : 'transparent',
          boxShadow: isOpen ? '0 0 16px rgba(247,89,31,0.6)' : 'none',
          transform: isOpen ? 'rotate(135deg)' : 'rotate(0deg)',
          transition: 'transform 360ms cubic-bezier(0.34,1.56,0.5,1), border-color 200ms, background 200ms, box-shadow 240ms',
        }}>
          {/* plus drawn as two bars so it morphs cleanly */}
          <span style={{ position: 'absolute', width: 12, height: 2, borderRadius: 2, background: isOpen ? '#fff' : 'rgba(255,255,255,0.85)' }} />
          <span style={{ position: 'absolute', width: 2, height: 12, borderRadius: 2, background: isOpen ? '#fff' : 'rgba(255,255,255,0.85)' }} />
        </span>
      </button>

      <div style={{
        display: 'grid',
        gridTemplateRows: isOpen ? '1fr' : '0fr',
        transition: 'grid-template-rows 420ms cubic-bezier(0.16,1,0.3,1)',
      }}>
        <div style={{ overflow: 'hidden' }}>
          <p style={{
            fontFamily: 'Poppins', fontWeight: 400,
            fontSize: 15, lineHeight: 1.7,
            color: 'rgba(255,255,255,0.74)',
            margin: 0, padding: '0 28px 24px',
            opacity: isOpen ? 1 : 0,
            transform: isOpen ? 'translateY(0)' : 'translateY(-8px)',
            transition: 'opacity 360ms ease 120ms, transform 360ms cubic-bezier(0.16,1,0.3,1) 120ms',
          }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Generic long-form page (Terms, Safety) — clean sectioned body
   ============================================================ */
function LongFormPage({ kicker, title, sections, onBack, lead }) {
  return (
    <SubPageShell kicker={kicker} title={title} onBack={onBack}>
      {lead && (
        <p style={{
          fontFamily: 'Poppins', fontWeight: 400,
          fontSize: 'clamp(15px, 1.2vw, 17px)', lineHeight: 1.7,
          color: 'rgba(255,255,255,0.72)',
          margin: '0 0 56px',
          maxWidth: '64ch',
        }}>{lead}</p>
      )}
      {sections.map((s, i) => (
        <section key={i} style={{
          padding: '28px 0',
          borderTop: i === 0 ? '1px solid rgba(255,255,255,0.10)' : 'none',
          borderBottom: '1px solid rgba(255,255,255,0.10)',
        }}>
          <h2 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(17px, 1.3vw, 20px)',
            color: '#fff', letterSpacing: '0', margin: '0 0 14px',
          }}>{s.h}</h2>
          {Array.isArray(s.body)
            ? s.body.map((p, j) => (
                <p key={j} style={paraStyle}>{p}</p>
              ))
            : <p style={paraStyle}>{s.body}</p>
          }
          {s.list && (
            <ul style={{ margin: '12px 0 0', paddingLeft: 0, listStyle: 'none' }}>
              {s.list.map((li, j) => (
                <li key={j} style={{
                  fontFamily: 'Poppins', fontWeight: 400, fontSize: 15, lineHeight: 1.7,
                  color: 'rgba(255,255,255,0.72)', margin: '6px 0',
                  paddingLeft: 22, position: 'relative',
                }}>
                  <span style={{
                    position: 'absolute', left: 0, top: 11, width: 10, height: 1,
                    background: 'rgba(247,89,31,0.7)',
                  }} />
                  {li}
                </li>
              ))}
            </ul>
          )}
        </section>
      ))}
    </SubPageShell>
  );
}

const paraStyle = {
  fontFamily: 'Poppins', fontWeight: 400,
  fontSize: 15, lineHeight: 1.75,
  color: 'rgba(255,255,255,0.72)',
  margin: '0 0 12px',
};

function TermsPage({ onBack }) {
  return (
    <LongFormPage
      kicker="Legal"
      title="Terms & Policy"
      lead="By accessing or ordering from this site you agree to the terms below. Please read them. If anything is unclear, email manager@levizion.com before placing an order."
      sections={TERMS_SECTIONS}
      onBack={onBack}
    />
  );
}

function SafetyPage({ onBack }) {
  return (
    <LongFormPage
      title="Safety"
      lead="The Fireball is a real fire prop. Your safety, and the safety of everyone around you, comes first, so the complete safety instructions are sent to your email when you purchase."
      sections={SAFETY_SECTIONS}
      onBack={onBack}
    />
  );
}

/* ============================================================
   PLACEHOLDER COPY — replace with real copy when you have it
   ============================================================ */
const FAQ_ITEMS = [
  {
    q: "When does the Fireball ship?",
    a: "Pre-orders ship in waves as soon as production batches are finished. You'll get an email with tracking the moment your order is dispatched. Current estimate: 6–8 weeks from order date.",
  },
  {
    q: "Do you ship worldwide?",
    a: "Yes. We ship the Freestyle Ball and the Fireball to every country we're legally allowed to send fire equipment to. Some regions may require additional paperwork or a longer transit time.",
  },
  {
    q: "How long does shipping take?",
    a: "EU / UK: 3–5 business days. US: 5–9 business days. Rest of world: 7–14 business days. You'll get tracking the moment we hand the parcel to the carrier.",
  },
  {
    q: "How do I use the Fireball safely?",
    a: "Full fuel and handling guidance is included in the safety guide we email you when you purchase. Read it in full before your first use.",
  },
  {
    q: "Can I return or refund my order?",
    a: "Apparel: 14-day return window from delivery, unworn with tags. The Fireball and Freestyle Ball can be returned within 14 days of delivery only if the seal is unbroken. See Terms & Policy for the full process.",
  },
  {
    q: "Is the Fireball safe?",
    a: "It's safe when handled exactly as instructed. It's a real fire prop, not a toy. The complete handling and safety guidance is included in the safety guide emailed to you on purchase.",
  },
  {
    q: "Do you do brand collabs or live performances?",
    a: "Yes, for events, festivals, brand campaigns and content shoots. Email manager@levizion.com with the brief, date, and location and we'll come back to you within 48 hours.",
  },
];

const TERMS_SECTIONS = [
  {
    h: "Orders & payment",
    body: [
      "All prices are listed in USD and include applicable taxes where required. Local duties and import fees may apply on delivery and are the responsibility of the customer.",
      "By placing an order you confirm that you are at least 18 years old, or that an adult has approved the order on your behalf.",
    ],
  },
  {
    h: "Shipping",
    body: "We ship from our studio in waves. Estimated dispatch times are listed in the FAQ. Once a parcel is handed to the carrier we are not responsible for delivery delays caused by the carrier or by customs.",
  },
  {
    h: "Returns & refunds",
    body: "Apparel may be returned within 14 days of delivery, unworn and with original tags. Fire equipment may be returned within 14 days of delivery only if the safety seal is intact and unbroken. Refunds are issued to the original payment method within 10 business days of receiving the return.",
    list: [
      "Email manager@levizion.com with your order number to start a return",
      "We will send return instructions within 48 hours",
      "Customer is responsible for return shipping unless the item arrived damaged or incorrect",
    ],
  },
  {
    h: "Use of the product",
    body: "By purchasing the Fireball, the Freestyle Ball or any related fire equipment, you agree that you assume full responsibility for any injury, damage or loss arising from its use. Always follow the safety guide. We do not accept liability for misuse.",
  },
  {
    h: "Intellectual property",
    body: "The ZION / LeviZion name, logo, brush wordmark and all related imagery, video and copy are the property of ZION. You may not reproduce, distribute or resell them without written permission.",
  },
  {
    h: "Privacy",
    body: "We collect only the information needed to fulfil your order and contact you about it: name, address, email, phone, payment confirmation. We do not sell or share your data with third parties beyond shipping carriers and payment processors.",
  },
  {
    h: "Contact",
    body: "Questions about these terms? Email manager@levizion.com.",
  },
];

const SAFETY_SECTIONS = [
  {
    h: "Full safety guide on purchase",
    body: "Every order includes the complete ZION safety guide and official lighting walkthrough, sent straight to your email the moment you purchase. Read it in full before your first burn.",
  },
  {
    h: "A real fire prop",
    body: "The Fireball involves real, open flame and is intended for trained performers of legal age. It is not a toy. Always follow the official guidance you receive, never use it alone, and keep proper fire-safety equipment within reach.",
  },
  {
    h: "Questions before you order?",
    body: "Want to understand exactly what's involved before buying? Email manager@levizion.com and we'll walk you through it.",
  },
  {
    h: "Disclaimer",
    body: "This equipment is for trained users at their own risk. By using it, you accept full responsibility for any damage or injury caused. ZION accepts no liability for misuse.",
  },
];

window.FaqPage = FaqPage;
window.TermsPage = TermsPage;
window.SafetyPage = SafetyPage;
