import type { Metadata } from "next";
import { Reveal } from "@/component/common/Reveal";
import { refundPolicyData } from "@/data/refundPolicyData";

// ISR: keep HTML cache lifetime short (s-maxage=3600) instead of static 1-year default.
export const revalidate = 3600;

export const metadata: Metadata = {
  title: "Refund Policy",
  robots: { index: false, follow: false },
  description: "Refund Policy of DesignShare by Elegant IT Limited.",
};

export default function RefundPolicyPage() {
  const renderText = (text: string) => {
    if (text.includes("admin@designshare.net")) {
      const parts = text.split("admin@designshare.net");
      return (
        <>
          {parts[0]}
          <a
            href="mailto:admin@designshare.net"
            style={{
              color: "#1E5EFF",
              textDecoration: "underline",
              fontWeight: 600,
            }}
          >
            admin@designshare.net
          </a>
          {parts[1]}
        </>
      );
    }
    return text;
  };

  return (
    <div className="ds-page">
      <section
        className="ds-sec"
        style={{
          background: "#F4EFE1",
          paddingTop: "160px",
          paddingBottom: "120px",
        }}
      >
        <div className="ds-container" style={{ maxWidth: "800px" }}>
          <Reveal>
            <h1 className="ds-h-2" style={{ marginBottom: "20px" }}>
              {refundPolicyData.title}
            </h1>
            <p
              className="ds-lede"
              style={{ marginBottom: "60px", opacity: 0.7 }}
            >
              Last updated: {refundPolicyData.lastUpdated}
            </p>
          </Reveal>

          <Reveal>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "40px",
                color: "#222222",
                fontFamily:
                  "var(--font-jakarta, 'Plus Jakarta Sans'), system-ui, sans-serif",
                fontSize: "16px",
                lineHeight: "1.75",
              }}
            >
              {refundPolicyData.sections.map((section, idx) => (
                <div key={idx}>
                  <h3
                    style={{
                      fontSize: "20px",
                      fontWeight: 800,
                      color: "#0F0F10",
                      marginBottom: "16px",
                    }}
                  >
                    {section.title}
                  </h3>

                  {section.paragraphs &&
                    section.paragraphs.map((p, pIdx) => (
                      <p key={pIdx} style={{ marginBottom: "16px" }}>
                        {renderText(p)}
                      </p>
                    ))}

                  {section.listItems && (
                    <ul
                      style={{
                        paddingLeft: "20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "12px",
                        listStyleType: "disc",
                        marginBottom: "16px",
                      }}
                    >
                      {section.listItems.map((item, lIdx) => (
                        <li key={lIdx}>{renderText(item)}</li>
                      ))}
                    </ul>
                  )}

                  {section.extraListItems && (
                    <ul
                      style={{
                        paddingLeft: "20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "12px",
                        listStyleType: "disc",
                        marginBottom: "16px",
                      }}
                    >
                      {section.extraListItems.map((item, elIdx) => (
                        <li key={elIdx}>{renderText(item)}</li>
                      ))}
                    </ul>
                  )}

                  {section.postParagraphs &&
                    section.postParagraphs.map((p, pIdx) => (
                      <p key={pIdx} style={{ marginTop: "16px" }}>
                        {renderText(p)}
                      </p>
                    ))}
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}