// Main app — wires sections together, owns tweaks + checkout state.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "finish": "brass",
  "paperWarmth": 0,
  "showProcess": true,
  "showGallery": true,
  "showReviews": true,
  "showShipping": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [order, setOrder] = React.useState(null);

  // expose finish setter for the in-customizer swatches
  window.__setFinish = (f) => setTweak('finish', f);

  // apply paper warmth (subtle hue shift on cream paper)
  React.useEffect(() => {
    const w = tweaks.paperWarmth || 0;
    const baseH = 80;
    const h = baseH + w * 12;
    const c = Math.max(0.005, 0.025 + w * 0.006);
    document.documentElement.style.setProperty('--paper',   `oklch(92% ${c} ${h})`);
    document.documentElement.style.setProperty('--paper-2', `oklch(89% ${c} ${h})`);
    document.documentElement.style.setProperty('--paper-3', `oklch(83% ${c + 0.005} ${h})`);
  }, [tweaks.paperWarmth]);

  const onCheckout = (o) => setOrder(o);
  const onPay = (o) => {
    // ============================================================
    //  STRIPE INTEGRATION — replace placeholders to go live
    // ============================================================
    //  1. Set your publishable key:    const STRIPE_PK = "pk_live_xxx";
    //  2. Create a Price in Stripe for "Classic Round – $99" and use its id:
    //                                  const PRICE_ID = "price_xxx";
    //  3. Either call your backend to create a Checkout Session and redirect
    //     to session.url, or use Stripe.js redirectToCheckout (below).
    // ============================================================
    const STRIPE_PK = "pk_test_DEMO_REPLACE_ME";
    const PRICE_ID  = "price_DEMO_REPLACE_ME";

    if (STRIPE_PK.startsWith("pk_test_DEMO") || !window.Stripe) {
      // Demo path — open simulated Stripe Checkout page in a new tab
      const amount = (o.total || 99) * 100;
      const sim = encodeURIComponent(JSON.stringify({
        product: 'Classic Round Pet Tag',
        engraving: o.name,
        phone: o.phone,
        breed: o.breed,
        finish: o.finish,
        goldPlated: !!o.goldPlated,
        amount,
      }));
      window.open(`stripe-sim.html?o=${sim}`, '_blank', 'noopener');
      return;
    }
    // Live path — separate line items keep the upgrade tracked in Stripe.
    const stripe = window.Stripe(STRIPE_PK);
    const lineItems = [{ price: PRICE_ID, quantity: 1 }];
    if (o.goldPlated) {
      // const GOLD_PRICE_ID = "price_gold_xxx";
      // lineItems.push({ price: GOLD_PRICE_ID, quantity: 1 });
    }
    stripe.redirectToCheckout({
      lineItems,
      mode: 'payment',
      successUrl: window.location.origin + '/success.html',
      cancelUrl: window.location.href,
      clientReferenceId: JSON.stringify({
        engraving: o.name, phone: o.phone, breed: o.breed,
        finish: o.finish, goldPlated: !!o.goldPlated,
      }),
    });
  };

  return (
    <React.Fragment>
      <Topbar />
      <Nav />
      <Hero tweaks={tweaks} onCheckout={onCheckout} />
      {tweaks.showProcess && <Process />}
      {tweaks.showGallery && <Gallery />}
      {tweaks.showReviews && <Testimonials />}
      {tweaks.showShipping && <Shipping />}
      <Footer />
      <CheckoutModal order={order} onClose={() => setOrder(null)} onPay={onPay} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Finish on display">
          <TweakRadio
            label="Metal"
            value={tweaks.finish}
            options={[
              { value: 'brass',  label: 'Brass'  },
              { value: 'silver', label: 'Silver' },
              { value: 'copper', label: 'Copper' },
            ]}
            onChange={(v) => setTweak('finish', v)}
          />
        </TweakSection>
        <TweakSection label="Paper warmth">
          <TweakSlider
            label="Hue shift"
            value={tweaks.paperWarmth}
            min={-1} max={1} step={0.1}
            onChange={(v) => setTweak('paperWarmth', v)}
          />
        </TweakSection>
        <TweakSection label="Sections">
          <TweakToggle label="Process"  value={tweaks.showProcess}  onChange={(v) => setTweak('showProcess', v)} />
          <TweakToggle label="Gallery"  value={tweaks.showGallery}  onChange={(v) => setTweak('showGallery', v)} />
          <TweakToggle label="Reviews"  value={tweaks.showReviews}  onChange={(v) => setTweak('showReviews', v)} />
          <TweakToggle label="Shipping" value={tweaks.showShipping} onChange={(v) => setTweak('showShipping', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);