/* ═══════════════════════════════════════════════
   AUREAL — Home Page
   3 hero variations + sunrise section progression
   ═══════════════════════════════════════════════ */

/* ── Hero: Dawn (centered, cinematic) ── */
function HeroDawn({ tweaks, navigate }) {
  return (
    <div className="au-hero hero-dawn">
      <div className="au-hero-bg"></div>
      <div className="au-hero-content">
        <img src={window.__resources && window.__resources.logoTag || 'assets/Logo_Tag_v2.png'} alt="Aureal" className="hero-logo" />
        <h1 className="hero-title" style={{ fontFamily: tweaks.fontFamily }}>
          {tweaks.heroHeadline}
        </h1>
        <p className="hero-sub">{tweaks.heroSub}</p>
        <div className="hero-buttons">
          <Btn variant="primary" onClick={() => navigate('contact')}>{tweaks.ctaText}</Btn>
          <Btn variant="outline" onClick={() => navigate('custom')}>How It Works</Btn>
        </div>
      </div>
    </div>);

}

/* ── Hero: Horizon (split layout) ── */
function HeroHorizon({ tweaks, navigate }) {
  return (
    <div className="au-hero hero-horizon">
      <div className="au-hero-bg"></div>
      <div className="au-hero-content">
        <div className="hero-text">
          <p className="hero-tagline">the golden age of creation</p>
          <h1 className="hero-title" style={{ fontFamily: tweaks.fontFamily }}>
            {tweaks.heroHeadline}
          </h1>
          <p className="hero-sub">{tweaks.heroSub}</p>
          <div className="hero-buttons">
            <Btn variant="primary" onClick={() => navigate('contact')}>{tweaks.ctaText}</Btn>
            <Btn variant="outline" onClick={() => navigate('pricing')}>See Pricing</Btn>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-frame">
            <div className="hero-frame-inner">
              <div style={{ textAlign: 'center', lineHeight: 1.8 }}>
                <img src={window.__resources && window.__resources.logoTag || 'assets/Logo_Tag_v2.png'} alt="Aureal" style={{ width: 64, margin: '0 auto 1rem', filter: 'drop-shadow(0 0 12px rgba(204,158,4,0.5)) drop-shadow(0 0 40px rgba(204,158,4,0.2))' }} />
                Cinematic product<br />photography here
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

/* ── Hero: Editorial (full-width dramatic type) ── */
function HeroEditorial({ tweaks, navigate }) {
  return (
    <div className="au-hero hero-editorial">
      <div className="au-hero-bg"></div>
      <div className="au-hero-content">
        <img src={window.__resources && window.__resources.logoTag || 'assets/Logo_Tag_v2.png'} alt="Aureal" className="hero-logo" />
        <h1 className="hero-title" style={{ fontFamily: tweaks.fontFamily }}>
          <span className="hero-line">Custom apparel</span>
          <span className="hero-line">for <span className="gold">communities</span></span>
          <span className="hero-line">that care.</span>
        </h1>
        <div className="hero-bottom">
          <p className="hero-sub">{tweaks.heroSub}</p>
          <div className="hero-buttons">
            <Btn variant="primary" onClick={() => navigate('contact')}>{tweaks.ctaText}</Btn>
            <Btn variant="outline" onClick={() => navigate('custom')}>Learn More</Btn>
          </div>
        </div>
      </div>
    </div>);

}

/* ── Order Journey (scroll-revealed timeline) ──
   Merges the old NoColorFees + HowItWorks problem sections into one
   3-point before/during/after timeline. Center spine attaches to the
   heading underline and runs past the last pill; problem left
   ("every other vendor"), Aureal's fix right. Copy is placeholder —
   formatting pass first, wording polish later. */
const JOURNEY_STAGES = [
  {
    pill: 'Before',
    problem: 'No design help, no one to collaborate with.',
    solution: 'A dedicated designer and a real person on every order.',
  },
  {
    pill: 'During',
    problem: 'Colors cost extra, fees hide in the fine print, blanks feel cheap.',
    solution: 'Full-color included, no hidden fees, premium garments.',
  },
  {
    pill: 'After',
    problem: 'Reorders start from scratch — the merch never reaches its potential.',
    solution: 'Your storefront stays live: reorder anytime and earn 50% on every sale.',
  },
];

function OrderJourney() {
  return (
    <Section bg="light">
      <FadeIn>
        <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto' }}>
          <Eyebrow>The custom-merch journey</Eyebrow>
          <h2>Every other vendor leaves you stranded.</h2>
        </div>
      </FadeIn>
      <div className="au-journey">
        <div className="au-journey-rule" aria-hidden="true"></div>
        <div className="au-journey-spine" aria-hidden="true"></div>
        <div className="au-journey-heads">
          <div className="au-journey-head left">Every other vendor</div>
          <div></div>
          <div className="au-journey-head right">Aureal's got you covered</div>
        </div>
        {JOURNEY_STAGES.map((s, i) => (
          <FadeIn key={i} delay={i * 100} className="au-journey-stage">
            <div className="au-journey-problem"><span className="au-journey-text">{s.problem}</span><span className="au-journey-mark x">✗</span></div>
            <div className="au-journey-pill">{s.pill}</div>
            <div className="au-journey-solution"><span className="au-journey-mark check">✓</span><span className="au-journey-text">{s.solution}</span></div>
          </FadeIn>
        ))}
      </div>
      <FadeIn delay={150}>
        <p style={{ textAlign: 'center', fontSize: '0.82rem', color: 'var(--text-muted-dark)', marginTop: '1rem', fontStyle: 'italic' }}>Storefronts go live with our first client orders this fall.</p>
      </FadeIn>
    </Section>);}
/* ── Two Paths — the client journey: order first, storefront after.
     (Was "Three ways to work with Aureal" — transparent pricing is a
     feature of ordering, not a way to work; folded into the order card.
     Component name kept for mount stability.) ── */
function ThreePaths({ navigate }) {
  const paths = [
  {
    title: 'The order',
    desc: 'Bring a design or build one with us. Full-color print, published prices, one point of contact from sketch to delivery.',
    link: 'Start your order',
    page: 'custom'
  },
  {
    title: 'The storefront',
    desc: 'Your merch stays live after delivery. Supporters buy anytime — your community earns on every sale.',
    link: 'Browse storefronts',
    page: 'community'
  }];

  return (
    <Section bg="dark">
      <FadeIn>
        <Eyebrow>The partnership</Eyebrow>
        <h2>Start with an order. Stay for the storefront.</h2>
      </FadeIn>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', maxWidth: 880, margin: '2.5rem auto 0' }}>
        {paths.map((p, i) =>
        <FadeIn key={i} delay={i * 100}>
            <div className="au-card" onClick={() => navigate(p.page)} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
              <h3 style={{ marginBottom: '0.75rem' }}>{p.title}</h3>
              <p style={{ fontSize: '0.92rem', flex: 1, marginBottom: '1.25rem' }}>{p.desc}</p>
              <span className="path-link">{p.link} <span className="arrow">→</span></span>
            </div>
          </FadeIn>
        )}
      </div>
    </Section>);

}

/* ── Product Showcase ── */
const PRODUCT_GROUPS = [
  {
    key: 'tee',
    title: 'T-Shirts',
    blurb: 'The everyday essential for any community.',
    tiers: [
      { key: 'tee-budget',   label: 'Budget',   from: '$9.37',  spec: '180 GSM · 5.3 oz', desc: 'Events & high-volume orders' },
      { key: 'tee-standard', label: 'Standard', from: '$13.89', spec: '230 GSM · 6.8 oz', desc: 'Brand merch & community drops' },
      { key: 'tee-premium',  label: 'Premium',  from: '$20.04', spec: '230 GSM · 6.8 oz', desc: 'Corporate & quality-forward' },
    ],
  },
  {
    key: 'hoodie',
    title: 'Hoodies',
    blurb: 'Heavyweight, oversized, drop-shoulder. The statement piece for any brand.',
    tiers: [
      { key: 'hoodie-budget',   label: 'Budget',   from: '$22.82', spec: '300 GSM · 8.8 oz',  desc: 'Student orgs & events' },
      { key: 'hoodie-standard', label: 'Standard', from: '$31.93', spec: '380 GSM · 11.2 oz', desc: 'Brand merch & Greek life' },
      { key: 'hoodie-premium',  label: 'Premium',  from: '$40.22', spec: '430 GSM · 12.7 oz', desc: 'Premium drops & corporate' },
    ],
  },
];

function TierCard({ tier, productLabel, image, colors, selectedColor, onColorSelect, mainImage }) {
  const displayImage = mainImage || image;
  return (
    <div className="au-tier-card">
      <div className="au-tier-frame">
        {displayImage ? (
          <img src={displayImage} alt={`${productLabel} — ${tier.label}`} className="au-tier-img" />
        ) : (
          <ImgPlaceholder aspect="4/5" label={`${productLabel} · ${tier.label}`} className="au-tier-placeholder" />
        )}
        <span className="au-tier-badge">{tier.label}</span>
      </div>
      <div className="au-tier-meta">
        {tier.spec && <p className="au-tier-spec">{tier.spec}</p>}
        <p className="au-tier-desc">{tier.desc}</p>
        {colors && colors.length > 0 && (
          <div className="au-swatches">
            <div className="au-swatch-label">
              {selectedColor || (colors.length + ' colors')}
            </div>
            <div className="au-swatch-row">
              {colors.map(c => {
                const hex = window.__aurealColorToHex ? window.__aurealColorToHex(c.name) : null;
                return (
                  <button
                    key={c.name}
                    type="button"
                    className={'au-swatch' + (selectedColor === c.name ? ' sel' : '')}
                    title={c.name}
                    aria-label={c.name}
                    style={{ background: hex || 'var(--border)' }}
                    onClick={(e) => { e.stopPropagation(); onColorSelect && onColorSelect(c.name); }}
                  />
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function ProductShowcase({ navigate, tweaks = {}, onTierClick, showPricingCTA = true }) {
  const [catalog, setCatalog] = React.useState(null);
  const [selected, setSelected] = React.useState({});

  React.useEffect(() => {
    if (window.__aurealFetchCatalog) {
      let cancelled = false;
      window.__aurealFetchCatalog().then(map => { if (!cancelled) setCatalog(map); });
      return () => { cancelled = true; };
    }
  }, []);

  /* Map tier key to Shopify product handle: "tee-budget" → "budget-t-shirt" */
  const tierKeyToHandle = (tierKey) => {
    const [product, tier] = (tierKey || '').split('-');
    if (!product || !tier) return null;
    return tier + '-' + (product === 'tee' ? 't-shirt' : 'hoodie');
  };

  return (
    <Section bg="dark">
      <FadeIn>
        <Eyebrow>Product catalog</Eyebrow>
        <h2>T-Shirts and Hoodies. Three quality tiers. All full-color.</h2>
        <GoldRule />
      </FadeIn>

      <div className="au-product-groups">
        {PRODUCT_GROUPS.map((g) => (
          <div key={g.key} className="au-product-group">
            <FadeIn>
              <div className="au-product-head">
                <h3>{g.title}</h3>
                <p>{g.blurb}</p>
              </div>
            </FadeIn>
            <div className="au-tier-grid">
              {g.tiers.map((t, i) => {
                const handle = tierKeyToHandle(t.key);
                const sp = catalog ? catalog.get(handle) : null;
                const selColor = selected[t.key];
                const activeColorObj = sp && sp.colors.find(c => c.name === selColor);
                const mainImg = (activeColorObj && activeColorObj.image)
                  || (sp && sp.image)
                  || tweaks['img_' + t.key]
                  || null;
                const handleCardClick = onTierClick
                  ? () => onTierClick(t, g.key, sp, selColor)
                  : undefined;
                return (
                  <FadeIn key={t.key} delay={i * 90}>
                    <div onClick={handleCardClick} style={onTierClick ? { cursor: 'pointer' } : undefined}>
                      <TierCard
                        tier={t}
                        productLabel={g.title}
                        image={tweaks['img_' + t.key] || null}
                        mainImage={mainImg}
                        colors={sp ? sp.colors : null}
                        selectedColor={selColor}
                        onColorSelect={(name) => setSelected(s => ({ ...s, [t.key]: name }))}
                      />
                    </div>
                  </FadeIn>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      {showPricingCTA && (
        <FadeIn delay={200}>
          <div style={{ textAlign: 'center', marginTop: '3rem' }}>
            <Btn variant="outline" onClick={() => navigate('pricing')}>See Full Pricing →</Btn>
          </div>
        </FadeIn>
      )}
    </Section>
  );
}

/* ── About Teaser ── */
function AboutTeaser({ navigate, tweaks, setTweak }) {
  return (
    <Section bg="light">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4rem', alignItems: 'center' }}>
        <FadeIn>
          <Eyebrow>THE ORIGIN STORY</Eyebrow>
          <h2>It started with a choir hoodie.</h2>
          <GoldRule />
          <p style={{ marginBottom: '1rem' }}>I didn't start a company because I had a business plan. I started one because I could never find the right T-shirt.

          </p>
          <p style={{ marginBottom: '1.5rem' }}>Later on, my choir class needed hoodies. I designed and supplied them. People kept asking who made them. The rest is history.

          </p>
          <Btn variant="outline" onClick={() => navigate('about')}>Read More</Btn>
        </FadeIn>
        <FadeIn delay={150}>
          <CropImage src="assets/founder.jpg" tweaks={tweaks} setTweak={setTweak} keyPrefix="founder" defaultAspect="3/4" />
        </FadeIn>
      </div>
    </Section>);

}

/* ── Home Page ── */
function HomePage({ tweaks, navigate, setTweak }) {
  const heroMap = { dawn: HeroDawn, horizon: HeroHorizon, editorial: HeroEditorial };
  const HeroComponent = heroMap[tweaks.heroStyle] || HeroDawn;

  return (
    <div>
      <HeroComponent tweaks={tweaks} navigate={navigate} />
      <OrderJourney />
      <ThreePaths navigate={navigate} />
      {tweaks.showAbout && <AboutTeaser navigate={navigate} tweaks={tweaks} setTweak={setTweak} />}
      {tweaks.showProducts && <ProductShowcase navigate={navigate} tweaks={tweaks} />}
      <GoldCTA
        headline="Ready to make something worth wearing?"
        cta={tweaks.ctaText}
        navigate={navigate} />
      
    </div>);

}

Object.assign(window, {
  HeroDawn, HeroHorizon, HeroEditorial,
  OrderJourney, ThreePaths, ProductShowcase, TierCard, PRODUCT_GROUPS,
  AboutTeaser, HomePage
});