/* landing.jsx — LandingPage, TopBar (with flipping logo), BananaBreadFrame, CTAButtons */

const SMS_HREF =
  'sms:+17174915845?&body=Hey%20Laurel%21%20I%20loved%20your%20banana%20bread.%20Can%20I%20get%20more%20info%3F';
const CALL_HREF = 'tel:+17174915845';
const IG_HREF = 'https://instagram.com/laurels.bakehouse';

function TopBar({ onOrderClick }) {
  return (
    <header className="lb-topbar">
      <FlippingLogo size={56} />
      <button
        type="button"
        onClick={onOrderClick}
        className="lb-topbar__cta"
      >
        Order
        <Heart size={11} />
      </button>
    </header>
  );
}

function BananaBreadFrame({ tilt, onTapTilt, onPointerMove, onPointerLeave }) {
  const reduce = typeof window !== 'undefined' &&
    window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const t = reduce ? { rx: 0, ry: 0, rz: 0, s: 1 } : (tilt || { rx: 0, ry: 0, rz: 0, s: 1 });
  return (
    <div
      className="lb-hero-photo-wrap"
      onPointerMove={onPointerMove}
      onPointerLeave={onPointerLeave}
      onClick={onTapTilt}
      style={{
        perspective: 1200,
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        cursor: 'pointer',
        // Subtle continuous float — respects prefers-reduced-motion via the
        // animation-name being conditional below.
        animation: reduce ? 'none' : 'lb-hero-float 6.5s ease-in-out infinite',
      }}
    >
      <img
        className="lb-hero-photo"
        src="assets/hero-flavors.jpg"
        alt="Five flavors of Laurel's banana bread, baked fresh."
        draggable="false"
        style={{
          width: '94%',
          maxWidth: 380,
          aspectRatio: '1 / 1',
          objectFit: 'cover',
          display: 'block',
          borderRadius: 18,
          border: '1px solid rgba(178, 96, 96, 0.45)',
          outline: '1px solid rgba(97, 24, 41, 0.10)',
          outlineOffset: -5,
          padding: 4,
          background: 'rgba(253, 242, 236, 0.45)',
          boxShadow:
            '0 22px 38px -18px rgba(64, 37, 23, 0.30),' +
            '0 6px 14px -8px rgba(97, 24, 41, 0.18)',
          transform: `rotateX(${t.rx}deg) rotateY(${t.ry}deg) rotateZ(${t.rz || 0}deg) scale(${t.s || 1})`,
          transformStyle: 'preserve-3d',
          transition: 'transform 420ms var(--lb-ease)',
          userSelect: 'none',
          WebkitUserSelect: 'none',
          touchAction: 'manipulation',
        }}
      />
    </div>
  );
}

function CTAButtons({ onOrderClick }) {
  return (
    <div className="lb-cta-dock">
      <a className="lb-btn lb-btn--primary" href={SMS_HREF}>
        <Icon.message size={14} />
        Text Laurel
      </a>
      <button type="button" className="lb-btn lb-btn--secondary" onClick={onOrderClick}>
        Order a loaf
        <Icon.arrowRight size={14} />
      </button>
      <a
        href={IG_HREF}
        target="_blank"
        rel="noopener"
        className="lb-cta-ig"
      >
        @laurels.bakehouse
      </a>
    </div>
  );
}

function LandingPage({ onOrderClick }) {
  const [tilt, setTilt] = React.useState({ rx: 0, ry: 0, rz: 0, s: 1 });
  const animRef = React.useRef(null);

  const handlePointerMove = (e) => {
    // Desktop cursor parallax (touch devices use the tap handler below).
    if (e.pointerType === 'touch') return;
    const rect = e.currentTarget.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;
    setTilt({ rx: (0.5 - y) * 8, ry: (x - 0.5) * 10, rz: (x - 0.5) * 2, s: 1 });
  };
  const handleLeave = () => setTilt({ rx: 0, ry: 0, rz: 0, s: 1 });

  // Mobile tap / click — a springy multi-step squash + rotate, settling
  // back to rest. Each step replaces the previous so a fast tapper still
  // gets clean motion (no jank from queued timers).
  const tapTilt = () => {
    if (animRef.current) { animRef.current.forEach((id) => clearTimeout(id)); }
    const steps = [
      { rx: -6, ry: 0, rz: -8, s: 0.96, ms: 0 },
      { rx:  4, ry: 12, rz:  6, s: 1.06, ms: 220 },
      { rx: -2, ry: -8, rz: -4, s: 1.02, ms: 460 },
      { rx:  0, ry: 0,  rz:  0, s: 1,    ms: 720 },
    ];
    animRef.current = steps.map((s) => setTimeout(() => setTilt(s), s.ms));
  };
  React.useEffect(() => () => {
    if (animRef.current) animRef.current.forEach((id) => clearTimeout(id));
  }, []);

  const handleHeroTap = () => {
    tapTilt();
    window.setTimeout(() => onOrderClick(), 140);
  };

  return (
    <div
      style={{
        position: 'relative',
        height: '100%',
        width: '100%',
        background:
          'radial-gradient(120% 60% at 50% 18%, #ffe5d8 0%, var(--lb-blush) 48%, #fbdfd2 100%)',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      {/* watermark wheat sprigs */}
      <img
        src="assets/wheat-flower.png"
        alt=""
        aria-hidden="true"
        style={{
          position: 'absolute',
          top: 70, left: -32,
          width: 130, opacity: 0.13,
          transform: 'rotate(-22deg)',
          pointerEvents: 'none',
        }}
      />
      <img
        src="assets/wheat-flower.png"
        alt=""
        aria-hidden="true"
        style={{
          position: 'absolute',
          bottom: -34, right: -28,
          width: 170, opacity: 0.12,
          transform: 'rotate(168deg)',
          pointerEvents: 'none',
        }}
      />

      <TopBar onOrderClick={onOrderClick} />

      {/* Hero logo — Laurel's full lockup with the slogan already in it.
          Source PNG is alpha-cropped to its visible bbox so it renders at
          its full intended weight inside the phone width. */}
      <div className="lb-hero-logo-wrap">
        <img
          className="lb-hero-logo"
          src="assets/logo-full.png"
          alt="Laurel’s Bakehouse — Homemade, Heartmade."
        />
      </div>

      {/* Hero photo — raised and centered between the logo and the CTAs.
          Wrapped in a thin warm border + small inset so it reads as a
          framed piece rather than free-floating clipart. */}
      <div
        className="lb-hero-stage"
      >
        <BananaBreadFrame
          tilt={tilt}
          onPointerMove={handlePointerMove}
          onPointerLeave={handleLeave}
          onTapTilt={handleHeroTap}
        />
      </div>

      {/* CTAs — the slogan now lives inside the hero logo above, so we
          don't repeat it here. */}
      <div className="lb-hero-cta-wrap">
        <CTAButtons onOrderClick={onOrderClick} />
      </div>
    </div>
  );
}

Object.assign(window, { LandingPage, BananaBreadFrame, CTAButtons, TopBar });